📅 最后修改于: 2023-12-03 14:51:58.074000 🧑 作者: Mango
在Web开发中，动态添加删除表格行是一项非常常见的任务。jQuery是一个非常流行的JavaScript库，可以帮助我们轻松地完成这项工作。
要动态添加表格行，我们需要使用jQuery的append()方法。这个方法可以将新元素添加到已有元素的结尾处。
我们首先需要创建一个空的表格，然后在需要的时候添加新的行。以下是一个基本的示例：
<!DOCTYPE html>
<html>
<head>
<title>动态添加表格行</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<table id="myTable">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
</table>
<button id="addRow">添加行</button>
<script>
$(document).ready(function(){
$("#addRow").click(function(){
var markup = "<tr><td>Steve Jobs</td><td>56</td><td>CEO</td></tr>";
$("#myTable").append(markup);
});
});
</script>
</body>
</html>
在这个示例中，我们先创建了一个空的表格。然后添加一个“添加行”的按钮。当用户点击这个按钮时，jQuery将创建一个包含三列的新行，并将它添加到表格末尾。
如果要动态删除表格行，我们需要使用jQuery的remove()方法。这个方法可以将元素从DOM中删除。
以下是一个示例：
<!DOCTYPE html>
<html>
<head>
<title>动态删除表格行</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<table id="myTable">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
<th>操作</th>
</tr>
<tr>
<td>Steve Jobs</td>
<td>56</td>
<td>CEO</td>
<td><button class="btnDeleteRow">删除</button></td>
</tr>
<tr>
<td>Bill Gates</td>
<td>62</td>
<td>软件工程师</td>
<td><button class="btnDeleteRow">删除</button></td>
</tr>
</table>
<script>
$(document).ready(function(){
$(".btnDeleteRow").click(function(){
$(this).closest("tr").remove();
});
});
</script>
</body>
</html>
在这个示例中，我们为每行添加了一个删除按钮。当用户单击该按钮时，jQuery将查找包含该按钮的行并将其从表格中删除。
在本文中，我们介绍了如何使用jQuery动态添加和删除表格行。这是Web开发的常见任务，jQuery可以帮助我们轻松地完成这项工作。希望这篇文章能对您有所帮助！