JQuery编程demo练习

最新推荐文章于 2022-12-07 10:03:23 发布

小圣_fighting

最新推荐文章于 2022-12-07 10:03:23 发布

阅读量4.5k

点赞数 4

分类专栏：学习笔记 html 文章标签： jquery dom html

本文链接：https://blog.csdn.net/xie_xiansheng/article/details/50879082

版权

学习笔记同时被 2 个专栏收录

81 篇文章 0 订阅

订阅专栏

html

27 篇文章 0 订阅

订阅专栏

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" ο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>

效果图如下：

小圣_fighting

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JQuery编程demo练习

JQuery练习demo：编写程序，实现： 1、选中其中一列的复选框时，该复选框所在行的背景色高亮显示（黄色）。 2、取消选中复选框时，所在行的背景色恢复。===================================答案=================================html代码：无标题文档.classw{
复制链接

扫一扫

专栏目录