后台系统管理表格的全选,反选,查找,选中行;

一.后台系统管理表格的全选,反选,查找,选中行

1:html

<input type="text" id="username"><button>查找</button>
<button id="btnFx">反选</button>
<table class="datalist">
    <thead>
        <tr>
            <th width="20"><input type="checkbox" id="all"></th>
            <th>姓名</th>
            <th>昵称</th>
            <th>性别</th>
            <th>爱好</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox"></td>
            <td>刘备</td>
            <td>小刘</td>
            <td>男</td>
            <td>撩妹，装逼，编草鞋</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>关羽</td>
            <td>关二</td>
            <td>男</td>
            <td>耍大刀，变脸，喝酒</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>张飞</td>
            <td>张三</td>
            <td>男</td>
            <td>打架，喝酒，耍流氓</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>赵云</td>
            <td>赵四</td>
            <td>男</td>
            <td>打架，喝酒，耍帅</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>貂蝉</td>
            <td>美女</td>
            <td>女</td>
            <td>撩汉，化妆</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>小乔</td>
            <td>乔二</td>
            <td>女</td>
            <td>弹琴，唱歌，撩周瑜</td>
        </tr>
    </tbody>
</table>

2:css

.datalist {
	border:1px solid #ccc;
	border-collapse:collapse;
	width:100%;
}
.datalist thead tr {
	background-color:#dfdfdf;
}
td,th {
	border:1px solid #ccc;
	padding:5px 10px;
}
.odd {
	background-color:#efefef;
}
.selected {
	background-color:#FFEFBB;
	color:#323232;
}

3:js

$(function() {
    //点击tr 背景改变  并改变对应的checkbox的状态
    $('tbody tr').click(function() {
        console.log('click');
        console.log(this);
        $(this).toggleClass('selected');
        //通过样式判断是否有勾选
        $(this).find(':checkbox').prop('checked', $(this).hasClass('selected'));
        allPD()
    })

    //全选按钮
    $('#all').click(function() {
        console.log($(this).prop('checked'));
        var bAll = $(this).prop('checked');
        if (bAll) {
            //全选
            $('tbody tr').addClass('selected');
            $('tbody :checkbox').prop('checked', true);
        } else {
            //全不选
            $('tbody tr').removeClass('selected');
            $('tbody :checkbox').prop('checked', false);
        }
    })
    //反选
    $('#btnFx').click(function() {
        $('tbody tr').toggleClass('selected');
        $('tbody :checkbox').each(function() {
            //this 遍历的checkbox js
            //通过父节点的父节点 找到tr
            console.log($(this).parent().parent().hasClass('selected')) //true  false
            $(this).prop('checked', $(this).parent().parent().hasClass('selected'))
        })
        allPD()
    })

    //查找功能
    $('button').eq(-2).click(function() {
        //获取输入框的内容
        var name = $('#username').val();
        if (name == "") {
            console.log("输入错误");
        } else {
            //清除原来的状态
            $('tbody tr').removeClass('selected');
            $('tbody :checkbox').prop('checked', false);
            //匹配对应的td
            var $td = $('tbody td:contains(' + name + ')')
            //通过td找到对应的tr
            $td.parent().addClass('selected').find(':checkbox').prop('checked', true);
        }
        allPD()
    })

    //全选状态的修改
    function allPD() {
        //tr的数量 或者是checkbox的数量
        var checkboxLen = $('tbody :checkbox').length;
        //所有被勾选的checkbox的数量
        var checkedLen = $('tbody :checked').length;
        if (checkboxLen == checkedLen) {
            $('#all').prop('checked', true);
        } else {
            $('#all').prop('checked', false);
        }
    }
});