JQuery编程demo练习
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练习的更多相关文章
- JQuery AJAX Demo
JQuery AJAX Demo APP发展集团:347072638(HTML5,APP) 1.先看一个JQuery AJAX Demo HTML端: <!DOCTYPE html PUBLIC ...
- MyBatis的接口式编程Demo
很久没细看过MyBatis了,时间一长就容易忘记. 下面是一个接口式编程的例子. 这里的例子一共分为4步: 1 首先要有一个namespace为接口的全类名的映射文件,该例中是 IMyUser.xml ...
- jquery mobile demo
<!DOCTYPE html> <html> <head> <title>jQuery Mobile Demo</title> <me ...
- day14—JQuery编程基础
JQuery 1.什么是jQuery jQuery是一个优秀的JavaScript框架.一个轻量级的JavaScript类库.jQuery的核心理念是Write less.Do more. 使用jQu ...
- jquery选择器demo
大部分选择器都是基于下面这个简单的页面: <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- web前端基础——jQuery编程基础
1 jQuery简介 jQuery是一个兼容多浏览器的JavaScript库,核心理念是write less,do more(写得更少,做得更多).它对JavaScript进行了封装,使开发更便捷,并 ...
- jquery Deferred demo
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery编程基础精华01（jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器）
jQuery简介 什么是jQuery? jQuery就是一个JavaScript函数库,没什么特别的.(开源)联想SQLHelper类 jQuery能做什么?jQuery是做什么的? jQuery本身 ...
- jQuery编程规范与最佳实践（附带一些个人的笔记）
加载jQuery-Loading jQuery 1.坚持使用CDN来加载jQuery,这种别人服务器免费帮你托管文件的便宜干嘛不占呢.点击查看使用CDN的好处,点此查看一些主流的jQuery CDN地 ...
随机推荐
- zTree 点击文字 勾选check
callback: { onClick:function(event, treeId, treeNode){ console.info("onClick") var treeObj ...
- redis中基本命令
记录一下redis中的基本命令.redis中有redis-cli工具客户端,使用这个客户端来发送一些命令 一.redis-cli的使用 1.redis-cli使用之发送命令 2.redis-cli使 ...
- IOS开发之关键字synchronized
static Config * instance = nil; +(Config *) Instance { @synchronized(self) { if(nil == instance) { ...
- 06网络通信udp-tcp、正则
一． udp网络程序 1. udp网络程序-发送数据 1)创建客户端套接字 2)发送/接收数据 3)关闭套接字 from socket import * # 1. 创建udp套接字 udp_so ...
- [0] Hello World
受不了CSDN了,广告多,慢,编辑器难用,还限制博客数量.
- Python 1-3区分Python文件的两种用途和模块的搜索路径
区分Python文件的两种用途 run.py文件: import m1 m1.py文件: def f1(): print('f1') def f2(): print('f2') #当文件被执行时__n ...
- 当执行计划中出现BITMAP CONVERSION TO ROWIDS关键字时，需要注意了。
前言 前些天优化了一些耗费buffers较多的SQL,但系统CPU降低的效果不明显,于是又拉了awr报告,查看了SQL ordered by Gets排名前列的SQL. 分析 SQL代码: selec ...
- linux 负载各项查看命令
free -h top -c 查看使用情况 sar -r/s/b 查看IO状态 iostat -x 1 10 查看服务器的状态 vmstat 查看内存使用率最后的前10个进程 ps -aux |sor ...
- LeetCode（59）SPiral Matrix II
题目 Given an integer n, generate a square matrix filled with elements from 1 to n2 in spiral order. F ...
- Unix网络编程 — 头文件解析
1.1. < sys/types.h > primitive system data types(包含很多类型重定义,如pid_t.int8_t等) 1.2. < sys/socke ...