jQuery写表,有反选,用户id,爱好,家庭住址,操作五列,分别填入死值信息,操作下为删除按钮
时间: 2023-12-12 20:03:32 浏览: 72
jQuery中获取checkbox选中项等操作及注意事项
可以使用如下的代码实现:
```html
<table>
<thead>
<tr>
<th><input type="checkbox" id="check_all"></th>
<th>用户ID</th>
<th>爱好</th>
<th>家庭住址</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check_item"></td>
<td>1</td>
<td>足球</td>
<td>北京市朝阳区</td>
<td><button class="delete_item">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" class="check_item"></td>
<td>2</td>
<td>篮球</td>
<td>上海市浦东新区</td>
<td><button class="delete_item">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" class="check_item"></td>
<td>3</td>
<td>游泳</td>
<td>广州市天河区</td>
<td><button class="delete_item">删除</button></td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
// 全选/反选功能
$("#check_all").click(function() {
$(".check_item").prop("checked", $(this).prop("checked"));
});
$(".check_item").click(function() {
if (!$(this).prop("checked")) {
$("#check_all").prop("checked", false);
}
});
// 删除功能
$(".delete_item").click(function() {
$(this).closest("tr").remove();
});
});
</script>
```
在上面的代码中,我们使用了`<table>`、`<thead>`、`<tbody>`、`<tr>`、`<th>`、`<td>`和`<button>`等HTML标签来搭建表格的结构,然后使用jQuery来实现全选/反选和删除功能。
其中,全选/反选功能是通过监听`#check_all`的`click`事件来实现的,当`#check_all`被点击时,将所有`.check_item`的`checked`属性设置为与`#check_all`相同的值;反之,当`.check_item`中的任意一个被取消选中时,将`#check_all`的`checked`属性设置为`false`。
删除功能是通过监听`.delete_item`的`click`事件来实现的,当`.delete_item`被点击时,找到其最近的父级`<tr>`,然后将其从DOM树中删除。
阅读全文