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. 迅为iTOP-4418开发板串口虚拟控制台配置为普通串口

    如何将 iTOP-4418 的串口控制台配置为普通串口.在最终的产品中,如果需要额外的串口,可以将调试用的控制台串口作为普通串口使用,因为交付给最终用户手中的产品,一般不需要调试串口.屏蔽串口控制台需 ...

  2. POI原生导入读取EXCEL

    好久没用 最近项目有冲突 所以又用到了这个 谁知道以后还会不会用 先记下来吧 直接扔项目里 调方法就OK 了. 记录一下....不想再写类似这样的东西了 import org.apache.poi.h ...

  3. c语言 c++ 实现查看本地ip,外网ip, 本地主机名，查看http网址对应的ip

    /******************************************************************************* 作者 :邓中强 Email :1246 ...

  4. python3中shuffle函数

    1. shuffle函数与其他函数不一样的地方 shuffle函数没有返回值!shuffle函数没有返回值!shuffle函数没有返回值!仅仅是实现了对list元素进行随机排序的一种功能 请看下面的坑 ...

  5. 怎么在在php配置文件中打开php_fileinfo扩展

    运行composer下载文件时的相关报错截图 处理方法: 在php配置文件中打开php_fileinfo扩展 你需要在查看是否有这个扩展包, 如果有, 那就在php.ini写 extension=ph ...

  6. qrcode.js

    (function(r){r.fn.qrcode=function(h){var s;function u(a){this.mode=s;this.data=a}function o(a,c){thi ...

  7. Linux命令学习(5)：more和less

    引子 平常工作中经常需要查看很大的文本文件,如果用vi打开的话会非常慢,所以平常都用less,但是并没有很系统地学习过less的用法,今天总结一下less和more的用法. 经过学习我发现less比m ...

  8. insert，extend

    #insert s = ['8','9','sfd',('45','00'),{'01':'56'}] s0 = [] while 1 : extend = input("请输入要添加的内容 ...

  9. Swagger UI教程

    文档源地址 http://www.68idc.cn/help/makewebs/qitaasks/20160621620667.html Swagger-UI本身只提供在线测试功能,要集成它还需要告诉 ...

  10. Jmeter关联-获取token值

    1. token就是令牌,比如你授权(登录)一个程序时,他就是个依据,判断你是否已经授权该软件:也叫关联 2. cookie就是写在客户端的一个txt文件,里面包括你登录信息之类的,这样你下次在登录某 ...