一.後臺系統管理表格的全選,反選,查詢,選中行

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);
        }
    }
});