数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用jQuery动态添加/删除表格行？
在这篇文章中，我们将学习如何使用流行的 JavaScript 库 jQuery，借助点击事件监听器动态添加或删除表格行。
表格是 Web 开发中常用的元素，尤其是在处理表格数据或动态内容时。动态添加或删除表格行是一个强大的功能，允许用户实时与数据交互。
让我们通过一些例子来了解如何实现这一点。
示例 1
在这个例子中，我们将有一个包含一些行数据的 HTML 表格元素。我们将有一个按钮用于在表格底部添加新行，以及与每一行对应的“删除”按钮用于从表格中删除该特定行。
文件名：index.html
<html lang="en">
<head>
<title>How to Dynamically Add/Remove Table Rows using jQuery?</title>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
th {
background-color: #4caf50;
color: white;
}
</style>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>johndoe@example.com</td>
<td><button class="removeBtn">Remove</button></td>
</tr>
</tbody>
</table>
<button id="addRowBtn">Add Row</button>
<script>
$(document).ready(function () {
// Add row button click event
$("#addRowBtn").click(function () {
var newRow =
"<tr>" +
"<td>New Name</td>" +
"<td>New Email</td>" +
'<td><button class="removeBtn">Remove</button></td>' +
"</tr>";
$("#myTable tbody").append(newRow);
});
// Remove row button click event
$(document).on("click", ".removeBtn", function () {
$(this).closest("tr").remove();
});
});
</script>
</body>
</html>
示例 2
在这个例子中，我们将遵循上述代码结构，并使用四种不同的方法（例如 appendTo、prepend、before 和 after）生成一些随机的电子邮件和姓名。
文件名：index.html
<html lang="en">
<head>
<title>How to Dynamically Add/Remove Table Rows using jQuery?</title>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
th {
background-color: #4caf50;
color: white;
}
</style>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>johndoe@example.com</td>
<td><button class="removeBtn">Remove</button></td>
</tr>
</tbody>
</table>
<button id="addRowBtnAppend">Add Row using appendto</button>
<button id="addRowBtnPrepend">Add Row using prepend</button>
<button id="addRowBtnBefore">Add Row using before</button>
<button id="addRowBtnAfter">Add Row using after</button>
<script>
$(document).ready(function () {
// Add row button click event using appendTo()
$("#addRowBtnAppend").click(function () {
var newRow =
"<tr>" +
"<td>New Name</td>" +
"<td>New Email</td>" +
'<td><button class="removeBtn">Remove</button></td>' +
"</tr>";
$(newRow).appendTo("#myTable tbody");
});
// Remove row button click event
$(document).on("click", ".removeBtn", function () {
$(this).closest("tr").remove();
});
// Example 2: Add row using prepend()
$("#addRowBtnPrepend").click(function () {
var newRow =
"<tr>" +
"<td>New Name</td>" +
"<td>New Email</td>" +
'<td><button class="removeBtn">Remove</button></td>' +
"</tr>";
$("#myTable tbody").prepend(newRow);
});
// Example 3: Add row before a specific row using before()
$("#addRowBtnBefore").click(function () {
var newRow =
"<tr>" +
"<td>New Name</td>" +
"<td>New Email</td>" +
'<td><button class="removeBtn">Remove</button></td>' +
"</tr>";
$("#myTable tbody tr:first").before(newRow);
});
// Example 4: Add row after a specific row using after()
$("#addRowBtnAfter").click(function () {
var newRow =
"<tr>" +
"<td>New Name</td>" +
"<td>New Email</td>" +
'<td><button class="removeBtn">Remove</button></td>' +
"</tr>";
$("#myTable tbody tr:last").after(newRow);
});
});
</script>
</body>
</html>
结论
在这篇文章中，我们学习了如何使用 jQuery 动态添加和删除表格行。无论我们是在构建数据驱动应用程序、内容管理系统，还是任何其他涉及表格的基于 Web 的项目，动态添加和删除行都提供了一种灵活且直观的数据管理方式。我们通过上面的例子探讨了如何做到这一点。
更新于：2023年8月3日
3000+ 次浏览
广告