資料結構
網路
關係資料庫管理系統 (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.jquery.com/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.jquery.com/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+ 次瀏覽
廣告