-1
ここでは、テキストボックスを動的に追加/削除してデータベースに保存し、データベースに存在するデータの行を次のようにWebページに表示しました。テキストボックスの値を更新してデータベースに保存する方法
taxInfo.jsp
<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>
removeRow.jsp
<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>
以下のように 
コードがtaxInfoDB.jsp
<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>
私の質問は、変更された値を保存する方法です（例： "Tax Group"の "VAT"を "VAT5.5"に、 "Tax"を "SS5"の "SS"に変更した場合の例）をdatabase.And "保存"をクリックしても、変更された値を保存するだけでなく、 "行の追加"をクリックしてテキストボックスに値を入力すると、それらの値も保存する必要があります。
だから私はit.Any助けを行う方法上の任意のアイデアや提案を必要と理解されるであろう
の包みあなたを保存する必要がありますフォームと同じようにページを送信し、ontubmitを使用して、dtabaseのすべての行を保存し、ページをリロードして反映させるロジックを記述する必要があります。行を追加する場合は、同時にDBに反映させる場合は、ajaxを使用する必要があります。 – Santhucool