|
实现的方法是从网上论坛看到的，然后根据自己情况写来用的。table里面的checkbox选择框是在html里面就写好了，不是后期用js代码插入进去的。效果预览图
 
table表格的选择功能
table.table tr th,
td {
text-align: center;
cursor: pointer;
}
部门名称
部门负责人
联系电话
地址
操作列
信息部
张三
1395464646
XX市XX区
编辑
财务部
李四
1785454646
湖北省
添加
业务部
王五
13246231
湖南省
删除
// $(function () {
// $("#btn").on('click', function () {
// var rows = $("table").find('tbody input[type="checkbox"]');
// console.log(rows);
// var ids = [];
// rows.each(function (item, index) {
// if (index.checked) {
// ids.push(index.name);
// }
// });
// console.log(ids);
// });
// });
$(function () {
checkBox();
function checkBox() {
var $thr = $("table thead tr"); //表格头部的tr
var $checkAllTh = $("table thead tr").find('input').parent(); //表格头部的的全选按钮
var $tbr = $("table tbody tr"); //表格内容的tr
var $checkAll = $thr.find('input'); //表格头部的全选框
//全选
$checkAll.click(function (event) {
//根据表格头部（thead）的全选框的是否选中的状态（true或false）来设置表格内容（tbody）的选择框状态
$tbr.find('input').prop('checked', $(this).prop('checked'));
if ($(this).prop('checked')) {
$tbr.find('input').parent().parent().addClass('danger');
} else {
$tbr.find('input').parent().parent().removeClass('danger');
}
//防止点击事件向父元素冒泡 必须加阻止事件冒泡，不然会出现单击全选框按钮无作用的情况
event.stopPropagation();
});
//点击表格头部全选框所在的单元格时也触发全选框的点击操作
$checkAllTh.click(function () {
$(this).find('input').click();
});
//点击表格内容（tbody）下面的每一行的选择框
$tbr.find('input').click(function (event) {
//给选中和未选中，添加和删除样式
$(this).parent().parent().toggleClass('danger');
//判断tbody里面的已经选中的input长度和表格内容本有的input长度是有相等，如果相等，则把theard的选择框置为选中，
$checkAll.prop('checked', $tbr.find('input:checked').length == $tbr.find('input').length ?
true : false);
event.stopPropagation(); //防止点击事件向父元素冒泡 必须加阻止事件冒泡，不然会出现单击每一行内容的选框按钮无作用的情况
});
//点击tbody下面的每一行（非选择框）也能触发选择框的点击操作
$tbr.click(function () {
$(this).find('input').click();
});
}
})
|