版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Jack_num1/article/details/78060869
友情提示：运行代码还需在网上下载jquery.min.js文件并把html文件反正同一文件下
<!DOCTYPE html>
<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>