JQuery编程demo练习
2016-03-13 17:50
661 查看
JQuery练习demo:
编写程序,实现:
1、选中其中一列的复选框时,该复选框所在行的背景色高亮显示(***)。
2、取消选中复选框时,所在行的背景色恢复。
===================================答案=================================
html代码:
效果图如下:
编写程序,实现:
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>
效果图如下:
相关文章推荐
- day14—JQuery编程基础
- 又一个ajax实例,结合jQuery
- 什么是事件起泡?用jQuery阻止事件起泡
- jquery+struts2+json省市县三级联动
- jQuery的$.getJSON方法在IE浏览器下失效的解决方案
- etmvc+jQuery EasyUI Highcharts实现柱状图
- 菜鸟的Jquery validate入门
- jQuery(二)
- jquery插件-表单验证插件-rules
- jquery插件-表单验证插件-validator对象
- 使用jQuery.form插件,实现完美的表单异步提交
- 使用jQuery操作HTML的table表格的实例解析
- jquery点击当前对象,并alert文本内容
- PHP——菜单及内容轮换(Jquery)
- 常用jquery插件资料
- Jquery Ajax 跨域之JSONP方式极简示例,服务端是.net的ashx
- python web框架企业实战详解(第六期)\第三课时-ajax&jquery&webpy
- 使用jQuery操作HTML的table表格的实例解析
- Jquery ajax data 格式问题
- jquery插件-表单验证插件-提示信息中文化与定制提示信息