I want to add row dinamically in my html table , then save the new row in my database with servlet. how can i get the row in my servlet .please help me
-
i have this program code but it only in jsp page you need than i post hereIren Patel– Iren Patel2013-07-29 10:19:52 +00:00Commented Jul 29, 2013 at 10:19
-
in this code multiple row add dynamically you change code yourself and use in your project..Iren Patel– Iren Patel2013-07-29 10:25:00 +00:00Commented Jul 29, 2013 at 10:25
Add a comment
|
2 Answers
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chkbox[]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 1;
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
cell3.appendChild(element2);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD> 1 </TD>
<TD> <INPUT type="text" /> </TD>
</TR>
</TABLE>
</BODY>

2 Comments
user2425407
thank you for your answers but my problem is how to store the new line added to the database. (I'm looking for how to recover a servelet or in a jsp code). there is not a simpler code than the code of @IREN
user3625176
how to implement jquery autocomplete on input type text using this tutorial
Try this code
<%@page import="javax.xml.crypto.Data"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ page import="java.sql.*" %>
<%@ page import="java.util.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%Connection con =null; %>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Test</title>
<%
//Connection con;
Statement s=null;
ResultSet rs=null;
String url = "";
try
{
Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
con = DriverManager.getConnection(url);
}
catch (ClassNotFoundException cnfex)
{
cnfex.printStackTrace();
}
String sql = "select * from tbPresicription";
try
{
s = con.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE, ResultSet.CONCUR_READ_ONLY);
rs =s.executeQuery(sql);
while(rs.next())
{
// System.out.println("Name : "+rs.getString("PresicriptionIDP"));
}
System.out.println(" rs --> " + rs.first());
}
catch(Exception e)
{
System.out.println("Hello :"+e);
}
%>
<script src="js/jquery.js"></script>
<script type="text/javascript" language="javascript">
i=1;
a=1;
function addRow()
{
//Row Insert....
var table=document.getElementById("dataTable");
var row1=table.insertRow();
var row2=table.insertRow();
var row3=table.insertRow();
var row4=table.insertRow();
//Cell Insert Start
var cell1=row1.insertCell(0);
cell1.rowSpan="4";
cell1.innerHTML="";
cell1.align="center";
cell1.style.width = "30px";
cell1.innerHTML=i++;
//DropDownList
var cell1=row2.insertCell(0);
var abc=document.createElement("input");
abc.id="CompanyName"+a;
var Company=document.createElement("label");
Company.innerHTML =" Brand: ";
Company.style.width = "10px";
var Select = document.createElement('select');
var opt1 = document.createElement('option');
<% try
{
System.out.println(" rs --> click " + rs.first());
String IDP = null;
String Name=null;
%>
opt1.value="";
opt1.text="----Select Tablet----";
Select.appendChild(opt1);
<%
while (rs.next())
{
IDP = rs.getString("PresicriptionIDP")+":"+rs.getString("BrandName")+":"+rs.getString("Generic")+":"+rs.getString("Info")+":"+rs.getString("Dosage")+":"+rs.getString("Days")+":"+rs.getString("Qauntity")+":"+rs.getString("DosageInfo")+":"+rs.getString("TabletName")+":";
Name=rs.getString("TabletName");
// System.out.println("IDP :"+IDP+"Name is :"+Name);
%>
var opt2=document.createElement("option");
opt2.value="<%= IDP %>";
opt2.text="<%= Name %>";
Select.appendChild(opt2);
<%
}
}
catch(Exception e)
{
e.printStackTrace();
}
%>
Select.name="opt"+a;
Select.required="required";
Select.id="opt"+a;
var optid = "opt"+a;
var id=Select.id;
Select.setAttribute('onChange',"javascript:SelectItem(this.value,id);");
Select.style.width = "150px";
Company.readOnly = 'readonly';
cell1.appendChild(Select);
cell1.appendChild(Company);
cell1.appendChild(abc);
//Days Detail
var cell3=row2.insertCell(1);
var Days=document.createElement("input");
var Days1=document.createElement("label");
Days.type = "text";
Days1.innerHTML ="Days: ";
Days.name = "Days"+a;
Days.id="Days"+a;
Days.style.width = "30px";
cell3.rowSpan="2";
cell3.style.width = "83px";
cell3.appendChild(Days1);
cell3.appendChild(Days);
//Generic Detail
var cell1=row3.insertCell(0);
var Generic=document.createElement("input");
var Generic1 = document.createElement("label");
Generic.type = "text";
Generic1.innerHTML = "Generic: ";
Generic.name = "Generic"+a;
Generic.id = "Generic"+a;
Generic.style.width = "357px";
Generic.readOnly = 'readonly';
cell1.appendChild(Generic1);
cell1.appendChild(Generic);
//Dose Deside
var cell2=row2.insertCell(1);
var Dosage=document.createElement("input");
var Dosage1 = document.createElement("label");
Dosage.type = "text";
Dosage1.innerHTML = "Dosage: ";
Dosage.name = "Dosage"+a;
Dosage.id = "Dosage"+a;
Dosage.style.width = "80px";
cell2.rowSpan = "2";
cell2.appendChild(Dosage1);
cell2.appendChild(Dosage);
//Medicine Info
var cell1=row4.insertCell(0);
var Info=document.createElement("input");
var Info1 = document.createElement("label");
Info.type = "text";
Info1.innerHTML = "Info: ";
Info.name = "Info"+a;
Info.id = "Info"+a;
Info.readOnly = 'readonly';
Info.style.width = "500px";
cell1.style.width = "400px";
cell1.appendChild(Info1);
cell1.appendChild(Info);
cell1.colSpan="2";
//Medicine Dose Info...
var cell2 = row4.insertCell(1);
var DosageInfo = document.createElement("input");
var DosageInfo1 = document.createElement("label");
DosageInfo.type = "text";
DosageInfo1.innerHTML = "DosageInfo: ";
DosageInfo.name = "DosageInfo"+a;
DosageInfo.id = "DosageInfo"+a;
DosageInfo.style.width = "170px";
DosageInfo.readOnly = 'readonly';
cell2.colSpan = "2";
cell2.appendChild(DosageInfo1);
cell2.appendChild(DosageInfo);
//Medicine Qauntity define..
var cell4=row2.insertCell(3);
var Qauntity = document.createElement("input");
var Qauntity1 = document.createElement("label");
Qauntity.type = "text";
Qauntity1.innerHTML = "Qauntity: ";
Qauntity.name = "Qauntity"+a;
Qauntity.id = "Qauntity"+a;
Qauntity.style.width = "30px";
cell4.appendChild(Qauntity1);
cell4.appendChild(Qauntity);
cell4.rowSpan="2";
a++;
}
function SelectItem(val,id)
{
//alert('val : '+val);
var id1=id.substring(3);
//alert('id1 : '+id1);
var aa=val.split(":");
document.getElementById("CompanyName"+id1).value=aa[1];
document.getElementById("Generic"+id1).value=aa[2];
document.getElementById("Info"+id1).value=aa[3];
document.getElementById("Dosage"+id1).value=aa[4];
document.getElementById("Days"+id1).value=aa[5];
document.getElementById("Qauntity"+id1).value=aa[6];
document.getElementById("DosageInfo"+id1).value=aa[7];
}
function removeRow()
{
document.getElementById("dataTable").deleteRow(this);
}
</script>
<script type="text/javascript">
function addData()
{
//alert('hii : '+a);
var i;
var ss=0;
for(i=1;i<a;i++)
{
// alert('Hiiii : '+i);
var TabletName1=document.getElementById("opt"+i).value;
var CompanyName=document.getElementById("CompanyName"+i).value;
var Generic=document.getElementById("Generic"+i).value;
var Info=document.getElementById("Info"+i).value;
var Dosage=document.getElementById("Dosage"+i).value;
var Days=document.getElementById("Days"+i).value;
var Qauntity=document.getElementById("Qauntity"+i).value;
var DosageInfo=document.getElementById("DosageInfo"+i).value;
ss = ss+TabletName1;
}
// alert('TabletName1='+ss);
window.location.replace("index.jsp?name="+ss);
<%
int i=0;
String a = null;
try
{
String name=request.getParameter("name");
System.out.println("Name :"+name);
String data[]=name.split(":");
int size=data.length;
int size1=(size-1)/2;
String BrandName[]=new String[size1];
String TabletName[]=new String[size1];
String Generic[]=new String[size1];
String info[]=new String[size1];
String dosage[]=new String[size1];
String days[]=new String[size1];
String Qty[]=new String[size1];
String DosageInfo[]=new String[size1];
String PresicriptionIDP[]=new String[size1];
int x=0;
for(i=0;i<size+2;i++)
{
PresicriptionIDP[x]=data[i];
i++;
//System.out.println("PresicriptionIDP : "+PresicriptionIDP[x]);
BrandName[x]=data[i];
i++;
//System.out.println("BrandName : "+BrandName[x]);
Generic[x]=data[i];
i++;
//System.out.println("Generic : "+Generic[x]);
info[x]=data[i];
i++;
//System.out.println("info : "+info[x]);
dosage[x]=data[i];
i++;
//System.out.println("dosage : "+dosage[x]);
days[x]=data[i];
i++;
//System.out.println("days : "+days[x]);
Qty[x]=data[i];
i++;
//System.out.println("Qty :"+Qty[x]);
DosageInfo[x]=data[i];
i++;
//System.out.println("DosageInfo : "+DosageInfo[x]);
TabletName[x]=data[i];
i++;
//System.out.println("TabletName : "+TabletName[x]);
System.out.println("\n Value of : "+i);
x++;
System.out.println("Value of X="+x);
for(int ss=0;ss<x;ss++)
{
String insertTableSQL = "INSERT INTO tbPrescriptionNew"
+ "(PresicriptionIDP, TabletName, BrandName, Generic,Info,Dosage,Days,Qauntity,DosageInfo) VALUES"
+ "(?,?,?,?,?,?,?,?,?)";
PreparedStatement preparedStatement = con.prepareStatement(insertTableSQL);
preparedStatement.setString(1, PresicriptionIDP[ss]);
System.out.println("\n PresicriptionIDP" +PresicriptionIDP[ss]);
preparedStatement.setString(2, TabletName[ss]);
System.out.println("\n TabletName=" +TabletName[ss]);
preparedStatement.setString(3, BrandName[ss]);
System.out.println("\n BrandName=" +BrandName[ss]);
preparedStatement.setString(4, Generic[ss]);
System.out.println("\n Generic=" +Generic[ss]);
preparedStatement.setString(5, info[ss]);
System.out.println("\n info=" +info[ss]);
preparedStatement.setString(6, dosage[ss]);
System.out.println("\n dosage=" +dosage[ss]);
preparedStatement.setString(7, days[ss]);
System.out.println("\n days=" +days[ss]);
preparedStatement.setString(8, Qty[ss]);
System.out.println("\n Qty=" +Qty[ss]);
preparedStatement.setString(9, DosageInfo[ss]);
System.out.println("\n DosageInfo=" +DosageInfo[ss]);
// execute insert SQL stetement
preparedStatement.executeUpdate();
}
}
}
catch(Exception e)
{
e.printStackTrace();
}
%>
}
</script>
</head>
<body>
<center>
<input type="button" class="selectItem" onClick="addRow('dataTable')" value = "AddRow">
<input type='button' value='Delete' onclick="removeRow()"/>
</center>
<table id="dataTable" border="1" width="894px;" align="center">
</table>
<input type="button" onClick="addData()" value = "AddData">
</body>
</html>
3 Comments
user2425407
thank you for your answers but my problem is how to store the new line added to the database. (I'm looking for how to recover a servelet or in a jsp code). there is not a simpler code than the code of @IREN
Iren Patel
in this code row add in database with data after access from database
Sotirios Delimanolis
This "answer" is terrible. You're posting code without explaining what it does, you're recommending using Java scriplets within a jsp, and you're not using Java naming conventions.