Javascript JQuery驱动的动态表

我正在尝试创建一个脚本，我可以：

添加数据并将其追加到表中；及

编辑已输入的数据

到目前为止，这是我的代码：

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

$（文档）.ready（函数（）{
var num=0；
$（“#btn1”）。单击（函数（）{
num+=1；
$（“.tbl”）.append（“+$（“#txtName”）.val（）+”+$（“#cmbGender”）.val（）+”+$（“#txtContact”）.val（）+“编辑”）；
});
对于（var i=1；i我建议使用已经做得很好的几个现有javascript库中的一个。我最喜欢的是jQuery插件与或该插件搭配使用。您的具体问题是什么？您遇到了什么？如果您需要最大的灵活性，请使用css
display
table
s自己做；否则，您可以使用使用插入式应答器below@ExplosionPills我需要一种方法，一旦你点击某一行上的编辑按钮，该行将处于某种“编辑模式”（文本变为文本框等）。我试图知道如何识别单击了“编辑”按钮的那一行。我查阅了您提供的链接，但忘记了我的代码将位于html表单中，因此将由用户输入。您提供的链接更像是datagrid视图，需要数据源，不是吗？我不确定您的确切意思，但DataTables是非常灵活的-使用可以像包装一个现有的html表一样简单，或者您可以有一个“客户端”数据源（例如javascript文本），或者您可以通过ajax有一个服务器端数据源。