0

我正在尝试创建一个脚本,我可以:

  1. 添加数据并追加到表中;和
  2. 编辑已输入的数据。

到目前为止,这是我的代码:

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>");
    });
}
});

编辑:还有一件事。它将以一种形式进行处理并发送到数据库。

4

1 回答 1

1

我建议使用已经做得很好的几个现有 javascript 库之一。我最喜欢的是与DataTables 数据管理器插件jEditable插件配对的DataTables jQuery插件

于 2013-01-28T04:35:35.850 回答