我有一个 html 表，其中没有条目，并且我创建了 javascript 函数来在表中添加新行。我点击了这个链接http://mrbool.com/how-to-add-edit-and-delete-rows-of-a-html-table-with-jquery/26721但我不知道问题出在哪里，它没有添加任何行。即使单击“新建”按钮也没有任何反应。我已经添加了所有 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);
});
请帮我解决这个问题。提前致谢。
最佳答案
您的添加按钮的 ID 是:已添加，但您在 jquery 代码中使用了 #add。
将jquery部分中的#Add更改为#Addd。
关于javascript - 如何通过单击按钮添加行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26927285/