JQuery练习demo:
编敲代码,实现:
1、选中当中一列的复选框时,该复选框所在行的背景色高亮显示(黄色)。
编敲代码,实现:
1、选中当中一列的复选框时,该复选框所在行的背景色高亮显示(黄色)。
2、取消选中复选框时,所在行的背景色恢复。
===================================答案=================================
html代码:
<title>无标题文档</title> <script type="text/javascript" src="jquery-2.1.4/jquery.min.js" language="javascript"></script> </head> <style> .classw{ background-color:#CFF; } .classg{ background-color:#FFC; } .classy{ background-color:#FF0; } </style> <body> <h3 align="center">员工信息</h3> <table border="1px" cellspacing="0" width="50%" align="center"> <tr> <th></th> <th>姓名</th> <th>薪水</th> <th>年龄</th> </tr> <tr class="classw"> <td> <input type="checkbox" value="1" name="check" onclick="myselect()"/> </td> <td> 张三 </td> <td> 20000 </td> <td> 23 </td> </tr> <tr class="classg"> <td> <input type="checkbox" value="1" name="check" onclick="myselect()"/> </td> <td> 李四 </td> <td> 22000 </td> <td> 22 </td> </tr> <tr class="classw"> <td> <input type="checkbox" value="1" name="check" onclick="myselect()" /> </td> <td> 王五 </td> <td> 14000 </td> <td> 26 </td> </tr> <tr class="classg"> <td> <input type="checkbox" value="1" name="check" onclick="myselect()"/> </td> <td> 马六 </td> <td> 15000 </td> <td> 21 </td> </tr> </table> </body> <script> $("th").css("background-color","#CCC"); function myselect(){ $("table :checkbox:checked").parent().parent().addClass("classy"); $("table :checkbox").not("input:checked").parent().parent().removeClass("classy"); } </script> </html>
效果图例如以下: