在jQuery中,我們可以輕松地實(shí)現(xiàn)在table中進(jìn)行多行的同時選擇。這個功能非常實(shí)用,可以幫助我們處理一些數(shù)據(jù)操作。
要實(shí)現(xiàn)多選,我們需要準(zhǔn)備一個checkbox來進(jìn)行標(biāo)識。同時,我們需要實(shí)現(xiàn)一個全選功能,方便用戶進(jìn)行快速選擇。
以下是一個代碼示例:
<table> <thead> <tr> <th><input type="checkbox" id="selectAll"></th> <th>姓名</th> <th>性別</th> <th>年齡</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>張三</td> <td>男</td> <td>20</td> </tr> <tr> <td><input type="checkbox"></td> <td>李四</td> <td>女</td> <td>22</td> </tr> <tr> <td><input type="checkbox"></td> <td>王五</td> <td>男</td> <td>25</td> </tr> </tbody> </table> <script> //全選功能 $('#selectAll').click(function() { $('input[type="checkbox"]').prop('checked', this.checked); }); </script>
通過以上代碼,我們就可以實(shí)現(xiàn)table中的多選功能。同時,我們設(shè)置了一個全選按鈕,可以幫助用戶進(jìn)行快速選擇。
需要注意的是,在實(shí)現(xiàn)多選的時候,我們需要使用prop()而不是attr()方法,因?yàn)閜rop()方法具有更強(qiáng)的兼容性。