使用JS实现简单的表格的增加删除全选反选以及高亮效果

最新推荐文章于 2020-08-29 10:37:20 发布

Jack_num1

最新推荐文章于 2020-08-29 10:37:20 发布

阅读量1.2k

点赞数

分类专栏： # Javascript # JQuery 文章标签： javascript 全选反选增删表格

本文链接：https://blog.csdn.net/Jack_num1/article/details/78060869

版权

Javascript 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

JQuery

3 篇文章 0 订阅

订阅专栏

友情提示：运行代码还需在网上下载jquery.min.js文件并把html文件反正同一文件下

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table,tr,th,td{
padding: 0;
margin: 0;
}
table {
border: 2px solid #aaa;
width: 500px;
text-align: center;
}
tr,th,td {
border: 2px solid #aaa;
}
.pink {
background-color: pink;
}
.blue {
background-color: blue;
}
</style>
</head>
<body>

<table>
<thead>
<tr>
<th><input type="checkbox" name="checked" id="checked">全选</th>
<th><input type="checkbox" name="checked1" id="checked1">反选</th>
<th><button id="btn_add">添加</button></th>
</tr>
<tr>
<th></th>
<th>序号</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="check"></td>
<td>1</td>
<td><button class="cla_del">删除</button></td>
</tr>
</tbody>
</table>
</body>
<script src="jquery.min.js"></script>
<script>
$(function () {
//添加
$('#btn_add').click(function () {
var id = $('tbody>tr:last>td:eq(1)').text()*1+1;
var content = '<tr>'+
'<td><input type="checkbox" name="check"></td>'+
'<td>'+id+'</td>'+
'<td><button class="cla_del">删除</button></td>'+
'</tr>';
$('tbody').append(content);
});
//删除
$('tbody').on('click','.cla_del',function () {
$(this).parents('tr').remove();
});
//荧光棒效果
$('tbody').on('hover','tr',function(){
$(this).toggleClass('pink');
});
//全选
$('#checked').click(function () {
$('input[name=check]').prop('checked',$(this).prop('checked'));
$('input[name=check]').each(function () {
$(this).parents('tr').toggleClass('pink');
})
});
//反选
$('#checked1').click(function () {
$('input[name=check]').each(function () {
var check = $(this).prop('checked');
$(this).prop('checked',!check);
$(this).parents('tr').toggleClass('pink');
})
});
//单选
$('tbody').on('click','input[name=check]',function () {
$(this).parents('tr').toggleClass('pink');
});
/*$('table').on('click','input[type=checkbox]',function () {

$('tbody [name=check]').each(function () {
if ($(this).prop('checked')) {
$(this).parents('tr').addClass('blue');
} else {
$(this).parents('tr').removeClass('blue');
}

})
})*/
})
</script>
</html>