我能够在JSP页面中使用Struts2和Hibernate显示所有表（“Products（id，name）”）数据。但我想添加一个功能。应该有一个按钮（如“添加新行”），单击该按钮，将在表的末尾添加一个新行，它将提供添加要保存的值的选项。
为此，我试着像这样的jsp页面：
<table>
<tr>
<th>Name</th>
<th>EntryDate</th>
</tr>
<s:iterator value="productList">
<tr>
<td> <s:textfield name="Name" /></td>
<td> <sj:datepicker name="EntryDate" displayFormat="ymmdd" maxlength="6" /> </td>
</tr>
</s:iterator>
<tr>
<td><button type="button" onclick="addNewRow(this.parentNode);">Add new row </button> </td>
</tr>
</table>
我试图用javascript实现这个。但我失败了。任何人都可以有任何建议如何做到这一点。
使用以下代码
<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="functions.js"></script>
</head>
<body>
<button id="btnAddd”>New</button>
<table id="tblData">
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
function Add(){
$("#tblData tbody").append(
"<tr>"+
"<td><input type='text'/></td>"+
"<td><input type='text'/></td>"+
"<td><input type='text'/></td>"+
"<td><img src='images/disk.png' class='btnSave'><img src='images/delete.png' class='btnDelete'/></td>"+
"</tr>");
$(".btnSave").bind("click", Save);
$(".btnDelete").bind("click", Delete);
};
$(function(){
//Add, Save, Edit and Delete functions code
$(".btnEdit").bind("click", Edit);
$(".btnDelete").bind("click", Delete);
$("#btnAdd").bind("click", Add);
});
您可以将addNewRow实现为AJAX操作方法。在该方法中添加一个新实例化的Product对象并返回到该页面。您的迭代将处理相关输入字段的显示。
当你打电话给你时，你会转到一个js方法，这意味着一个按钮被预设..在这种情况下，使用js创建一行并显示一个显示“保存值”的按钮，然后当控件转回该按钮时当控件转回按钮时检查该保存值按钮的值，如果按下该按钮，则使用document.forms ['id']提交它...