我正在尝试创建一个脚本,我可以:
- 添加数据并追加到表中;和
- 编辑已输入的数据。
到目前为止,这是我的代码:
HTML:
<table class="tbl" style="width: 48%;">
<tr>
<td align="center">
Name</td>
<td align="center">
Gender</td>
<td align="center">
Contact Number</td>
<td align="center" width="70px">
</td>
</tr>
<tr>
<td>
<input id="txtName" type="text" /></td>
<td>
<select id="cmbGender" name="gender">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select></td>
<td>
<input id="txtContact" type="text" /></td>
<td align="middle">
</td>
</tr>
</table>
<button id="btn1">Add</button>
那么这是我的Javascript:
$(document).ready(function() {
var num = 0;
$("#btn1").click(function() {
num += 1;
$(".tbl").append("<tr><td>" + $("#txtName").val() + "</td><td>" + $("#cmbGender").val() + "</td><td>" + $("#txtContact").val() +"</td><td><button id=\"edit"+num+"\">Edit</button></td></tr>");
});
for(var i = 1; i <= num; i++) {
$("#edit"+i).click(function(){
alert(".tbl tr:eq("+i+")");
$(".tbl tr:eq("+i+")").append("<tr><td><input type=\"text\" value=\""+$("tr:eq("+i+") td:eq(0)").val()+"\" /></td><td><select><option>Male</option >Male<option></option></select></td><td><input type=\"text\" value=\""+$("tr:eq("+i+") td:eq(2)")+"\" /></td><td></td></tr>");
});
}
});
编辑:还有一件事。它将以一种形式进行处理并发送到数据库。