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>

效果图例如以下：

JQuery编程demo练习的更多相关文章

  1. JQuery AJAX Demo

    JQuery AJAX Demo APP发展集团:347072638(HTML5,APP) 1.先看一个JQuery AJAX Demo HTML端: <!DOCTYPE html PUBLIC ...

  2. MyBatis的接口式编程Demo

    很久没细看过MyBatis了,时间一长就容易忘记. 下面是一个接口式编程的例子. 这里的例子一共分为4步: 1 首先要有一个namespace为接口的全类名的映射文件,该例中是 IMyUser.xml ...

  3. jquery mobile demo

    <!DOCTYPE html> <html> <head> <title>jQuery Mobile Demo</title> <me ...

  4. day14—JQuery编程基础

    JQuery 1.什么是jQuery jQuery是一个优秀的JavaScript框架.一个轻量级的JavaScript类库.jQuery的核心理念是Write less.Do more. 使用jQu ...

  5. jquery选择器demo

    大部分选择器都是基于下面这个简单的页面: <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  6. web前端基础——jQuery编程基础

    1 jQuery简介 jQuery是一个兼容多浏览器的JavaScript库,核心理念是write less,do more(写得更少,做得更多).它对JavaScript进行了封装,使开发更便捷,并 ...

  7. jquery Deferred demo

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. jQuery编程基础精华01（jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器）

    jQuery简介 什么是jQuery? jQuery就是一个JavaScript函数库,没什么特别的.(开源)联想SQLHelper类 jQuery能做什么?jQuery是做什么的? jQuery本身 ...

  9. jQuery编程规范与最佳实践（附带一些个人的笔记）

    加载jQuery-Loading jQuery 1.坚持使用CDN来加载jQuery,这种别人服务器免费帮你托管文件的便宜干嘛不占呢.点击查看使用CDN的好处,点此查看一些主流的jQuery CDN地 ...

随机推荐

  1. css 动态导入css文件 @import 动态js加载 都是静态的

    @import "http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css" /*-防止各大cdn公共库加载地址失效 ...

  2. h5开发app,移动端 click 事件响应缓慢的解决方案

    造成点击缓慢的原因 从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作. 使用 ...

  3. selenium+python自动化unittest之跳过用例skip

    前言 当测试用例写完后,有些模块有改动时候,会影响到部分用例的执行,这个时候我们希望暂时跳过这些用例. 或者前面某个功能运行失败了,后面的几个用例是依赖于这个功能的用例,如果第一步就失败了,后面的用例 ...

  4. windows远程桌面链接“发生身份验证错误。要求的函数不受支持”

    解决办法: 开始菜单->运行gpedit.msc  打开配置项:计算机配置>管理模板>系统>凭据分配>加密Oracle修正 选择启用并选择易受攻击,配置保存后即可解决问题 ...

  5. 2018 CCPC 桂林站（upc复现赛）总结

    比赛一开始盯上了A题和G题,一个小时过去了还没有出题,心里有些乱.这时我看D题很多人过了,于是宝儿去看D题,说D题简单,转化成二进制暴力,于是就去做了.写的时候好像思路有点卡,WA了一发,后来马上发现 ...

  6. 零基础入门学习Python（28）--文件

    知识点 Python中使用open(...)这个内置函数来打开文件,并返回文件对象 open()函数参数说明: open(file, mode='r', buffering=-1, encoding= ...

  7. 01基础数据类型——list相关操作

    #列表的创建#列表是由[]来表示的,将元素放在[]中,如lst=["aa","bb",["cc","dd"," ...

  8. 用PHP写一个最简单的解释器Part4（写一个最简单的脚本语言）

    好吧!我承认我想标题党了.大家对解释器的吸引,绝对没有自己动手写一个脚本语言更有吸引力.不过如果看到标题过来的,可能也是 我承认,之前收藏的减肥视频,我都是这样对待他们的. 不过我还是相信很多程序猿o ...

  9. stark组件之删除页面内容搭建（八）

    删除页面没有太多的内容和功能 def del_view(self, request,pk,*args,**kwargs): """ 处理删除表弟 :param reque ...

  10. POJ3641 (快速幂） 判断a^p = a (mod p)是否成立

    Description Fermat's theorem states that for any prime number p and for any integer a > 1, ap = a ...