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" οnclick="myselect()"/>
</td>
<td>
张三
</td>
<td>
20000
</td>
<td>
23
</td>
</tr>
<tr class="classg">
<td>
<input type="checkbox" value="1" name="check" οnclick="myselect()"/>
</td>
<td>
李四
</td>
<td>
22000
</td>
<td>
22
</td>
</tr>
<tr class="classw">
<td>
<input type="checkbox" value="1" name="check" οnclick="myselect()" />
</td>
<td>
王五
</td>
<td>
14000
</td>
<td>
26
</td>
</tr>
<tr class="classg">
<td>
<input type="checkbox" value="1" name="check" οnclick="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>
效果图如下: