JQuery编程demo练习

JQuery练习demo:
    编敲代码,实现:
    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>


效果图例如以下:












原文地址:https://www.cnblogs.com/yjbjingcha/p/7284892.html