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. 如何优雅地从CSDN转载文章

    复制粘贴应该是最显而易见的方法,但是不仅会有丢失内容,而且格式也会丢失.要想达到更好的效果,可以从html源码入手. 1.在chrome浏览器中打开要转载的文章,右键选择检查 2.在chrome的右方 ...

  2. 【转】自动识别是手机端还是pc端只用一行代码就搞定

    <script type="text/javascript"> var mobileAgent = new Array("iphone", &quo ...

  3. java匹配http或https的url的正则表达式20180912

    package org.jimmy.autosearch20180821.test; import java.util.regex.Matcher; import java.util.regex.Pa ...

  4. 梯度提升决策树（GBDT）与XGBoost、LightGBM

    今天是周末,之前给自己定了一个小目标:每周都要写一篇博客,不管是关于什么内容的都行,关键在于总结和思考,今天我选的主题是梯度提升树的一些方法,主要从这些方法的原理以及实现过程入手讲解这个问题. 本文按 ...

  5. libuv httpparser写的简单http server

    libuv文档地址:http://docs.libuv.org/en/v1.x/代码地址:https://github.com/libuv/libuvhttp-parser https://githu ...

  6. Python学习-列表的转换和增加操作

    列表的转换和增加操作 列表的转换操作:可以将一个元组,字符串等转换成列表. str = "liuwenhao"; print(list(str)); // ['l', 'i', ' ...

  7. nginx配置文件+本地测试请求转发到远程服务器+集群

    1 在本地测试1 众所周知,nginx是一个反向代理的服务器,主要功能即为实现负载均衡和动静分离.在别的我别的文章有详细的nginx(Windows)相关介绍教程. 由于自己安装的nginx在本地的计 ...

  8. CSU1160

    十进制-十六进制 Time Limit: 1 Sec  Memory Limit: 128 MB Description 把十进制整数转换为十六进制,格式为0x开头,10~15由大写字母A~F表示. ...

  9. Codeforce 741B Arpa's weak amphitheater and Mehrdad's valuable Hoses（并查集&分组背包）

    题意: 给定n个价值为b 花费为w的物品, 然后某些物品是属于同一个组的, 给定一个花费限制V, 求在小于等于V的情况下取得到的价值最大为多少,能对于同一个组的物品,要么全取,要么只取一个. 分析: ...

  10. Huawei-R&S-网络工程师实验笔记20190615-IP基础（AR201上配置IP）

    >Huawei-R&S-网络工程师实验笔记20190615-IP基础(AR201上配置IP) >>实验开始,先上拓扑图参考: >>>一般正常配置IP操作如下 ...