Question

我有一个html表，其中没有条目，我已经使用javascript函数在表中添加新行。我按照此链接http://mrbool.com/how-to-add-edit-and-delete-rows-of-a-html-table-with-jquery/26721但我不知道它没有添加任何行的问题在哪里。甚至点击按钮＆＃39; new＆＃39;什么都没发生。我已经添加了所有js文件和图像，但仍有问题，我无法理解问题出在哪里。这是我的html表

<head>
   <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript" src="function.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>

我的function.js文件就是这个

    function Add() {
        $("#tblData tbody")
                .append(
                        "<tr>"
                                + "<td><input type='text'/></td>"
                                + "<td><input type='text'/></td>"
                                + "<td><input type='text'/></td>"
                                + "<td><img src='disk.png' class='btnSave'><img src='delete.png' class='btnDelete'/></td>"
                                + "</tr>");
        $(".btnSave").bind("click", Save);
        $(".btnDelete").bind("click", Delete);
    };

    function Save() {
        var par = $(this).parent().parent();
        var tdName = par.children("td:nth-child(1)");
        var tdPhone = par.children("td:nth-child(2)");
        var tdEmail = par.children("td:nth-child(3)");
        var tdButtons = par.children("td:nth-child(4)");
        tdName.html(tdName.children("input[type=text]").val());
        tdPhone.html(tdPhone.children("input[type=text]").val());
        tdEmail.html(tdEmail.children("input[type=text]").val());
        tdButtons
                .html("<img src='images/delete.png' class='btnDelete'/><img src='images/pencil.png' class='btnEdit'/>");
        $(".btnEdit").bind("click", Edit);
        $(".btnDelete").bind("click", Delete);
    };
function Delete() {
    var par = $(this).parent().parent();
    par.remove();
}; 


$(function() {
    $(".btnEdit").bind("click", Edit);
    $(".btnDelete").bind("click", Delete);
    $("#btnAdd").bind("click", Add);
});

请帮我解决这个问题。提前谢谢。

Answer 1

您的添加按钮的ID是：已添加，但您在jquery代码中使用了#add。

在jquery part中将#Add更改为#Addd。

Answer 2

首先正确拼写按钮，删除额外的＆＃39; d＆＃39;来自＆＃39;添加＆＃39;

<button id="btnAdd">New</button>

并且您无需为行中添加的每个删除/编辑按钮绑定click事件。此外，使用.on()绑定点击事件以动态添加按钮。见下面的代码

function Add() {
        $("#tblData tbody")
                .append(
                        "<tr>"
                                + "<td><input type='text'/></td>"
                                + "<td><input type='text'/></td>"
                                + "<td><input type='text'/></td>"
                                + "<td><img src='disk.png' class='btnSave'><img src='delete.png' class='btnDelete'/></td>"
                                + "</tr>");
    };

    function Save() {
        var par = $(this).parent().parent();
        var tdName = par.children("td:nth-child(1)");
        var tdPhone = par.children("td:nth-child(2)");
        var tdEmail = par.children("td:nth-child(3)");
        var tdButtons = par.children("td:nth-child(4)");
        tdName.html(tdName.children("input[type=text]").val());
        tdPhone.html(tdPhone.children("input[type=text]").val());
        tdEmail.html(tdEmail.children("input[type=text]").val());
        tdButtons
                .html("<img src='images/delete.png' class='btnDelete'/><img src='images/pencil.png' class='btnEdit'/>");

    };
function Delete() {
    //use closest to find parent TR
    var par = $(this).closest("tr");
    par.remove();
}; 


$(function() {
    $(".btnEdit").bind("click", Edit);
    $(".btnDelete").bind("click", Delete);
    $("#btnAdd").bind("click", Add);
    //add click event for dynamically added button
    $("tblData").on("click",".btnSave", Save);
    $("tblData").on("click",".btnDelete", Delete);
    $("tblData").on("click",".btnEdit", Edit);
});

如何通过单击按钮添加行

2 个答案: