1、选中其中一列的复选框时,该复选框所在行的背景色高亮显示(黄色)。
2、取消选中复选框时,所在行的背景色恢复
如图所示:
代码如下所示:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-3.3.1.js"></script> <style> .odd{ background-color: antiquewhite; } .even{ background-color: aquamarine; } .checked{ background-color: yellow; } </style> </head> <body> <table> <tr> <th></th> <th>姓名</th> <th>薪水</th> <th>年龄</th> </tr> <tr> <td><input type="checkbox"/></td> <td>张三</td> <td>20000</td> <td>23</td> </tr> <tr> <td><input type="checkbox"/></td> <td>李四</td> <td>22000</td> <td>22</td> </tr> <tr> <td><input type="checkbox"/></td> <td>王五</td> <td>14000</td> <td>26</td> </tr> <tr> <td><input type="checkbox"/></td> <td>马六</td> <td>15000</td> <td>21</td> </tr> </table> <div id="show"></div> <script type="text/javascript"> $(function(){ $("tr:odd").addClass("odd"); $("tr:even").addClass("even"); $(":checkbox").on("click",function(){ $(this).parent().parent().toggleClass("checked"); }); }); </script> </body> </html>