Fatal编程技术网
  • javascript/
  • Javascript 如何通过单击按钮添加行

Javascript 如何通过单击按钮添加行

javascript jquery html

Javascript 如何通过单击按钮添加行,javascript,jquery,html,Javascript,Jquery,Html,我有一个html表，其中没有任何条目，并且我使用javascript函数在表中添加新行。我遵循了这个链接，但我不知道哪里有问题，它没有添加任何行。即使单击“新建”按钮，也不会发生任何事情。我已经添加了所有js文件和图像，但仍然存在问题，我无法理解问题出在哪里。 这是我的html表格 <head> <script type="text/javascript" src="jquery-1.7.2.js"></script> <script ty

我有一个html表，其中没有任何条目，并且我使用javascript函数在表中添加新行。我遵循了这个链接，但我不知道哪里有问题，它没有添加任何行。即使单击“新建”按钮，也不会发生任何事情。我已经添加了所有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);
});

函数添加（）{
$（“#tblData tbody”）
.附加(
""
+ ""
+ ""
+ ""
+ ""
+ "");
$（“.btnSave”）.bind（“单击”，保存）；
$（“.btnDelete”）.bind（“单击”，删除）；
};
函数Save（）{
var PAR＝$（this）。
VTTDNAME= PAR儿童（“TD：NTH儿童（1）））；
VTD电话= PAR儿童（TD：NTH儿童（2））；
VTD＝PAR儿童（“TD：NTH儿童（3）））；
VAR TDButs= PAR儿童（“TD：NTH儿童（4）））；
html（tdName.children（“输入[type=text]”））.val（）；
html（tdPhone.children（“input[type=text]”））.val（）；
html（tdEmail.children（“input[type=text]”））.val（）；
TDB按钮
.html（“”）；
$（“.btnEdit”）.bind（“单击”，编辑）；
$（“.btnDelete”）.bind（“单击”，删除）；
};
函数Delete（）{
var PAR＝$（this）。
PAR.Relver（）；
}; 
$（函数（）{
$（“.btnEdit”）.bind（“单击”，编辑）；
$（“.btnDelete”）.bind（“单击”，删除）；
$（“#btnAdd”）.bind（“单击”，添加）；
});
请帮我解决这个问题。提前感谢。

您的add按钮的id是：Addd，但您在jquery代码中使用了#add

在jquery部分中更改#Add to#Addd。

您的Add按钮的id是：Addd，但您在jquery代码中使用了#Add

更改jquery部分中的#Add to#Addd。

首先更正按钮的拼写，从“Add”中删除额外的“d”

<button id="btnAdd">New</button>
首先更正按钮的拼写，从“添加”中删除额外的“d”

<button id="btnAdd">New</button>
我们能拿把小提琴吗？我想一切都好。我按照链接中的说明进行了操作。如果一切正常，它将正常工作。您的添加按钮id中有输入错误。也许您的浏览器没有获得引用，您可以尝试更改，id“tblData”移动到并在您的函数中。js将（“#tblData tbody”）更改为（“#tblData”）我们可以得到一把小提琴吗？我认为一切正常。我按照链接中的说明进行了操作。如果一切正常，它将正常工作。您的添加按钮id中有输入错误。可能您的资源管理器没有获得引用，您是否可以尝试更改，id“tblData”移动到并在您的函数中。js将（“#tblData tbody”）更改为（“#tblData”）