Javascript 如何更新文本框的值并将其保存到数据库
在这里，我创建了一个动态添加/删除文本框并将其保存到数据库中，然后再次在网页中显示数据库中的数据行，如下所示。 代码如下所示 taxInfo.jspJavascript 如何更新文本框的值并将其保存到数据库,javascript,java,jquery,jsp,servlets,Javascript,Java,Jquery,Jsp,Servlets,在这里，我创建了一个动态添加/删除文本框并将其保存到数据库中，然后再次在网页中显示数据库中的数据行，如下所示。 代码如下所示 taxInfo.jsp <script language="javascript"> // Add row to the HTML table function addRow() { var table = documen
<script language="javascript">
// Add row to the HTML table
function addRow() {
var table = document.getElementById('my_table'); //html table
var rowCount = table.rows.length; //no. of rows in table
var columnCount = table.rows[0].cells.length; //no. of columns in table
var row = table.insertRow(rowCount); //insert a row
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.setAttribute('id', 'newInput'); //set the id attribute
element1.setAttribute('name', 'name'+rowCount);
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.setAttribute('id', 'newInput'); //set the id attribute
element2.setAttribute('name', 'value'+rowCount);
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.setAttribute('id', 'newInput'); //set the id attribute
element3.setAttribute('name', 'taxgroup'+rowCount);
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "button";
element4.value = "Remove";
element4.setAttribute('id', 'newInput');
element4.setAttribute('style', 'width:63px');
cell4.appendChild(element4);
$('table').on('click', 'input[type="button"]', function(e){
$(this).closest('tr').remove()
})
}
function deleteRow(id){
var f=document.form;
f.method="post";
f.action='removeRow.jsp?id='+id;
f.submit();
}
function generate1(){
var table = document.getElementById('my_table');
var rowCount = table.rows.length;
var f = document.form;
f.target="";
f.method="post";
f.action='taxInfoDB.jsp?rowCount='+rowCount;
// f.submit();
}
</script>
<%!String taxgroup, name, value;
%>
<br />
<form name="form" method="post">
<div align="center">
<input type="button" value="Add row" name="add" onClick="addRow()" />
<br /><br/>
<b style="padding-right:100px">Name of the Tax</b> <b style="padding-right:100px">Value</b> <b style="padding-right:100px">TaxGroup</b> <br/>
<table id="my_table" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<th></th>
<th></th>
<th></th>
<%
int count = 0;
%>
<%
DBConnect db1 = new DBConnect();
try {
Connection con1 = db1.getCon();
Statement st1 = con1.createStatement();
String query1 = "Select id, TaxGroup,Name,Value from marketing_database.tax_info ORDER BY id;";
ResultSet rs1 = st1.executeQuery(query1);
while (rs1.next()) {
taxgroup=rs1.getString(2);
name=rs1.getString(3);
value=rs1.getString(4);
id=rs1.getString(1);
%>
<input id name = "taxname" type="text" value = <%=name%> />
<input name = "me" type="text" value = <%=value%> />
<input id = "group" name = "group" type="text" value = <%=taxgroup%> />
<input style="width:63px" type="button" value="Remove" onClick="deleteRow('<%=rs1.getString(1)%>')"/>
<br/>
<% count++;%>
<%
}
con1.close();
st1.close();
rs1.close();
} catch (Exception e) {
e.printStackTrace();
}
%>
</tr>
<tbody>
</tbody>
</table>
<input type = "hidden" name = "hiddenvalue" value="<%= count%>" />
<br />
<input type="submit" value=" Save" onclick="generate1()" />
</div></div>
</form>
//将行添加到HTML表中
函数addRow（）{
var table=document.getElementById（'my_table'）；//html table
var rowCount=table.rows.length；//表中的行数
var columnCount=table.rows[0].cells.length；//表中的列数
var row=table.insertRow（rowCount）；//插入一行
var cell1=行插入单元格（0）；
var element1=document.createElement（“输入”）；
element1.type=“text”；
element1.setAttribute（'id'，'newInput'）；//设置id属性
element1.setAttribute（'name'，'name'+行数）；
单元格1.附加子元素（元素1）；
var cell2=行插入单元格（1）；
var element2=document.createElement（“输入”）；
element2.type=“text”；
element2.setAttribute（'id'，'newInput'）；//设置id属性
element2.setAttribute（'name'，'value'+行计数）；
第2单元。附加子元素（元素2）；
var cell3=行插入单元格（2）；
var element3=document.createElement（“输入”）；
element3.type=“text”；
element3.setAttribute（'id'，'newInput'）；//设置id属性
element3.setAttribute（'name'，'taxgroup'+行计数）；
第三单元附属物（第三单元）；
var cell4=行插入单元格（3）；
var element4=document.createElement（“输入”）；
element4.type=“按钮”；
element4.value=“删除”；
element4.setAttribute（'id'，'newInput'）；
element4.setAttribute（'style'，'width:63px'）；
第四单元附属物（第四单元）；
$（'table'）。在（'click'，'input[type=“button”]”上，函数（e）{
$（this）.closest（'tr'）.remove（）
})
}
函数deleteRow（id）{
var f=document.form；
f、 方法=“post”；
f、 action='removeRow.jsp？id='+id；
f、 提交（）；
}
函数生成器1（）{
var table=document.getElementById（'my_table'）；
var rowCount=table.rows.length；
var f=document.form；
f、 target=“”；
f、 方法=“post”；
f、 action='taxInfoDB.jsp？rowCount='+rowCount；
//f.提交（）；
}
税值税组的名称
<body>
<%
String id = request.getParameter("id");
System.out.println("id is"+id);
try{
DBConnect db =new DBConnect();
Connection con = db.getCon();
String sql ="delete from marketing_database.tax_info where Name = '"+id+"'";
PreparedStatement ps = con.prepareStatement(sql);
ps.executeUpdate();
con.close();
ps.close();
}
catch(SQLException ex){
ex.printStackTrace();
}
response.sendRedirect("taxInfo.jsp");
%>
</body>
<body>
<%
String id = request.getParameter("id");
System.out.println("id is"+id);
try{
DBConnect db =new DBConnect();
Connection con = db.getCon();
String sql ="delete from marketing_database.tax_info where id = '"+id+"'";
PreparedStatement ps = con.prepareStatement(sql);
ps.executeUpdate();
con.close();
ps.close();
}
catch(SQLException ex){
ex.printStackTrace();
}
response.sendRedirect("taxInfo.jsp");
%>
</body>
<body>
<%
String row = request.getParameter("rowCount");
System.out.println("Row Count====="+row);
int rowCount = Integer.parseInt(row);
String taxgroup,name;
String value;
int j=1;
while (j < rowCount) {
name = request.getParameter("name" + j);
taxgroup = request.getParameter("taxgroup" + j);
value = request.getParameter("value" + j);
try{
DBConnect db =new DBConnect();
Connection con = db.getCon();
String sql ="INSERT INTO marketing_database.tax_info (TaxGroup,Name,Value) values (?,?,?);";
PreparedStatement ps = con.prepareStatement(sql);
ps.setString(1, taxgroup);
ps.setString(2, name);
ps.setString(3, value);
ps.executeUpdate();
System.out.println(" Saved to tax_info !!");
con.close();
ps.close();
} catch (SQLException ex) {
ex.printStackTrace();
}
j = j + 1;
}
response.sendRedirect("taxInfo.jsp");
%>
</body>
<body>
<%
String taxg=null,nameg=null,valg=null;
String id = null;
String row = request.getParameter("rowCount");
System.out.println("Row Count====="+row);
int rowCount = Integer.parseInt(row);
String hiddenvalue = request.getParameter("hiddenvalue");
int hid = Integer.parseInt(hiddenvalue);
System.out.println("hidden are:"+hid);
String taxgroup=null,name=null;
String value=null;
String[] group = request.getParameterValues("group");
String[] taxname = request.getParameterValues("taxname");
String[] me = request.getParameterValues("me");
int j=1;
int k=0;
while (j < rowCount) {
name = request.getParameter("name" + j);
taxgroup = request.getParameter("taxgroup" + j);
value = request.getParameter("value" + j);
System.out.println("value is"+value);
if((name!=null) && (taxgroup!=null) && (value!=null)) {
try{
DBConnect db =new DBConnect();
Connection con = db.getCon();
String sql ="INSERT INTO marketing_database.tax_info (TaxGroup,Name,Value) values (?,?,?);";
PreparedStatement ps = con.prepareStatement(sql);
ps.setString(1, taxgroup);
ps.setString(2, name);
ps.setString(3, value);
ps.executeUpdate();
System.out.println(" Saved to tax_info !!");
con.close();
ps.close();
} catch (SQLException ex) {
ex.printStackTrace();
}
j = j + 1;
}
}
while(k < hid) {
try {
DBConnect db1 = new DBConnect();
Connection con1 = db1.getCon();
Statement st1 = con1.createStatement();
String query1 = "Select id,TaxGroup,Name,Value from marketing_database.tax_info ORDER BY id;";
ResultSet rs1 = st1.executeQuery(query1);
while (rs1.next()) {
taxg = rs1.getString(2);
nameg = rs1.getString(3);
valg = rs1.getString(4);
id = rs1.getString(1);
System.out.println(id);
String group1 = group[k];
String taxname1 = taxname[k];
String value2 = me[k];
System.out.println(group1);
try{
DBConnect db2 =new DBConnect();
Connection con2 = db2.getCon();
String sql1 ="Update marketing_database.tax_info set TaxGroup = '"+group1+"', Name = '"+taxname1+"', Value= '"+value2+"' where id = '"+id+"'";
PreparedStatement ps1 = con2.prepareStatement(sql1);
ps1.executeUpdate();
System.out.println(" Saved to database !!");
con2.close();
ps1.close();
} catch (SQLException ex) {
ex.printStackTrace();
}
k = k + 1;
}
con1.close();
st1.close();
rs1.close();
} catch (Exception e) {
e.printStackTrace();
}
}
response.sendRedirect("taxInfo.jsp");
%>
</body>
<body>
<%
String id = request.getParameter("id");
System.out.println("id is"+id);
try{
DBConnect db =new DBConnect();
Connection con = db.getCon();
String sql ="delete from marketing_database.tax_info where Name = '"+id+"'";
PreparedStatement ps = con.prepareStatement(sql);
ps.executeUpdate();
con.close();
ps.close();
}
catch(SQLException ex){
ex.printStackTrace();
}
response.sendRedirect("taxInfo.jsp");
%>
</body>
<body>
<%
String id = request.getParameter("id");
System.out.println("id is"+id);
try{
DBConnect db =new DBConnect();
Connection con = db.getCon();
String sql ="delete from marketing_database.tax_info where id = '"+id+"'";
PreparedStatement ps = con.prepareStatement(sql);
ps.executeUpdate();
con.close();
ps.close();
}
catch(SQLException ex){
ex.printStackTrace();
}
response.sendRedirect("taxInfo.jsp");
%>
</body>
<body>
<%
String row = request.getParameter("rowCount");
System.out.println("Row Count====="+row);
int rowCount = Integer.parseInt(row);
String taxgroup,name;
String value;
int j=1;
while (j < rowCount) {
name = request.getParameter("name" + j);
taxgroup = request.getParameter("taxgroup" + j);
value = request.getParameter("value" + j);
try{
DBConnect db =new DBConnect();
Connection con = db.getCon();
String sql ="INSERT INTO marketing_database.tax_info (TaxGroup,Name,Value) values (?,?,?);";
PreparedStatement ps = con.prepareStatement(sql);
ps.setString(1, taxgroup);
ps.setString(2, name);
ps.setString(3, value);
ps.executeUpdate();
System.out.println(" Saved to tax_info !!");
con.close();
ps.close();
} catch (SQLException ex) {
ex.printStackTrace();
}
j = j + 1;
}
response.sendRedirect("taxInfo.jsp");
%>
</body>
<body>
<%
String taxg=null,nameg=null,valg=null;
String id = null;
String row = request.getParameter("rowCount");
System.out.println("Row Count====="+row);
int rowCount = Integer.parseInt(row);
String hiddenvalue = request.getParameter("hiddenvalue");
int hid = Integer.parseInt(hiddenvalue);
System.out.println("hidden are:"+hid);
String taxgroup=null,name=null;
String value=null;
String[] group = request.getParameterValues("group");
String[] taxname = request.getParameterValues("taxname");
String[] me = request.getParameterValues("me");
int j=1;
int k=0;
while (j < rowCount) {
name = request.getParameter("name" + j);
taxgroup = request.getParameter("taxgroup" + j);
value = request.getParameter("value" + j);
System.out.println("value is"+value);
if((name!=null) && (taxgroup!=null) && (value!=null)) {
try{
DBConnect db =new DBConnect();
Connection con = db.getCon();
String sql ="INSERT INTO marketing_database.tax_info (TaxGroup,Name,Value) values (?,?,?);";
PreparedStatement ps = con.prepareStatement(sql);
ps.setString(1, taxgroup);
ps.setString(2, name);
ps.setString(3, value);
ps.executeUpdate();
System.out.println(" Saved to tax_info !!");
con.close();
ps.close();
} catch (SQLException ex) {
ex.printStackTrace();
}
j = j + 1;
}
}
while(k < hid) {
try {
DBConnect db1 = new DBConnect();
Connection con1 = db1.getCon();
Statement st1 = con1.createStatement();
String query1 = "Select id,TaxGroup,Name,Value from marketing_database.tax_info ORDER BY id;";
ResultSet rs1 = st1.executeQuery(query1);
while (rs1.next()) {
taxg = rs1.getString(2);
nameg = rs1.getString(3);
valg = rs1.getString(4);
id = rs1.getString(1);
System.out.println(id);
String group1 = group[k];
String taxname1 = taxname[k];
String value2 = me[k];
System.out.println(group1);
try{
DBConnect db2 =new DBConnect();
Connection con2 = db2.getCon();
String sql1 ="Update marketing_database.tax_info set TaxGroup = '"+group1+"', Name = '"+taxname1+"', Value= '"+value2+"' where id = '"+id+"'";
PreparedStatement ps1 = con2.prepareStatement(sql1);
ps1.executeUpdate();
System.out.println(" Saved to database !!");
con2.close();
ps1.close();
} catch (SQLException ex) {
ex.printStackTrace();
}
k = k + 1;
}
con1.close();
st1.close();
rs1.close();
} catch (Exception e) {
e.printStackTrace();
}
}
response.sendRedirect("taxInfo.jsp");
%>
</body>
保存时，您应该像提交表单一样提交页面，在提交时，您应该编写逻辑，将所有行保存在数据数据库中，然后重新加载页面，以便其反映。在添加行的情况下，如果希望同时在DB中反映它，那么应该使用ajax。