第七章 jQuery操作表格及其它应用
1.表格变色
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <head>
- <title></title>
- <link href="css/style.css" rel="stylesheet" type="text/css" />
- <!-- 引入jQuery -->
- <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(function(){
- $("tbody>tr:odd").addClass("odd"); //先排除第一行,然后给奇数行添加样式
- $("tbody>tr:even").addClass("even"); //先排除第一行,然后给偶数行添加样式
- $('tbody>tr').click(function() {
- $(this)
- .addClass('selected')
- .siblings().removeClass('selected')
- .end()
- .find(':radio').attr('checked',true);
- });
- // 如果单选框默认情况下是选择的,则高色.
- // $('table :radio:checked').parent().parent().addClass('selected');
- //简化:
- $('table :radio:checked').parents("tr").addClass('selected');
- //再简化:
- //$('tbody>tr:has(:checked)').addClass('selected');
- })
- </script>
- </head>
- <body>
- <table>
- <thead>
- <tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr>
- </thead>
- <tbody>
- <tr><td><input type="radio" name="choice" value=""/></td>
- <td>张山</td><td>男</td><td>浙江宁波</td></tr>
- <tr><td><input type="radio" name="choice" value="" /></td>
- <td>李四</td><td>女</td><td>浙江杭州</td></tr>
- <tr><td><input type="radio" name="choice" value="" checked='checked' /></td>
- <td>王五</td><td>男</td><td>湖南长沙</td></tr>
- <tr><td><input type="radio" name="choice" value="" /></td>
- <td>找六</td><td>男</td><td>浙江温州</td></tr>
- <tr><td><input type="radio" name="choice" value="" /></td>
- <td>Rain</td><td>男</td><td>浙江杭州</td></tr>
- <tr><td><input type="radio" name="choice" value="" /></td>
- <td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
- </tbody>
- </table>
- </body>
- </html>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <head>
- <title></title>
- <link href="css/style.css" rel="stylesheet" type="text/css" />
- <!-- 引入jQuery -->
- <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(function(){
- $("tbody>tr:odd").addClass("odd"); //先排除第一行,然后给奇数行添加样式
- $("tbody>tr:even").addClass("even"); //先排除第一行,然后给偶数行添加样式
- $('tbody>tr').click(function() {
- if ($(this).hasClass('selected')) {
- $(this)
- .removeClass('selected')
- .find(':checkbox').attr('checked',false);
- }else{
- $(this)
- .addClass('selected')
- .find(':checkbox').attr('checked',true);
- }
- });
- // 如果复选框默认情况下是选择的,则高色.
- // $('table :checkbox:checked').parent().parent().addClass('selected');
- //简化:
- $('table :checkbox:checked').parents("tr").addClass('selected');
- //$('tbody>tr:has(:checked)').addClass('selected');
- })
- </script>
- </head>
- <body>
- <table>
- <thead>
- <tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr>
- </thead>
- <tbody>
- <tr><td><input type="checkbox" name="choice" value=""/></td>
- <td>张山</td><td>男</td><td>浙江宁波</td></tr>
- <tr><td><input type="checkbox" name="choice" value="" /></td>
- <td>李四</td><td>女</td><td>浙江杭州</td></tr>
- <tr><td><input type="checkbox" name="choice" value="" checked='checked' /></td>
- <td>王五</td><td>男</td><td>湖南长沙</td></tr>
- <tr><td><input type="checkbox" name="choice" value="" /></td>
- <td>找六</td><td>男</td><td>浙江温州</td></tr>
- <tr><td><input type="checkbox" name="choice" value="" /></td>
- <td>Rain</td><td>男</td><td>浙江杭州</td></tr>
- <tr><td><input type="checkbox" name="choice" value="" /></td>
- <td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
- </tbody>
- </table>
- </body>
- </html>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <head>
- <title></title>
- <link href="css/style.css" rel="stylesheet" type="text/css" />
- <!-- 引入jQuery -->
- <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(function(){
- $("tbody>tr:odd").addClass("odd");
- $("tbody>tr:even").addClass("even");
- $('tbody>tr').click(function() {
- //判断当前是否选中
- var hasSelected=$(this).hasClass('selected');
- //如果选中,则移出selected类,否则就加上selected类
- $(this)[hasSelected?"removeClass":"addClass"]('selected')
- //查找内部的checkbox,设置对应的属性。
- .find(':checkbox').attr('checked',!hasSelected);
- });
- // 如果复选框默认情况下是选择的,则高色.
- $('tbody>tr:has(:checked)').addClass('selected');
- })
- </script>
- </head>
- <body>
- <table>
- <thead>
- <tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr>
- </thead>
- <tbody>
- <tr><td><input type="checkbox" name="choice" value=""/></td>
- <td>张山</td><td>男</td><td>浙江宁波</td></tr>
- <tr><td><input type="checkbox" name="choice" value="" /></td>
- <td>李四</td><td>女</td><td>浙江杭州</td></tr>
- <tr><td><input type="checkbox" name="choice" value="" checked='checked' /></td>
- <td>王五</td><td>男</td><td>湖南长沙</td></tr>
- <tr><td><input type="checkbox" name="choice" value="" /></td>
- <td>找六</td><td>男</td><td>浙江温州</td></tr>
- <tr><td><input type="checkbox" name="choice" value="" /></td>
- <td>Rain</td><td>男</td><td>浙江杭州</td></tr>
- <tr><td><input type="checkbox" name="choice" value="" /></td>
- <td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
- </tbody>
- </table>
- </body>
- </html>
2.表格展开收缩
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <head>
- <title></title>
- <link href="css/style.css" rel="stylesheet" type="text/css" />
- <!-- 引入jQuery -->
- <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(function(){
- $('tr.parent').click(function(){ // 获取所谓的父行
- $(this)
- .toggleClass("selected") // 添加/删除高亮
- .siblings('.child_'+this.id).toggle(); // 隐藏/显示所谓的子行
- });
- })
- </script>
- </head>
- <body>
- <table>
- <thead>
- <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
- </thead>
- <tbody>
- <tr class="parent" id="row_01"><td colspan="">前台设计组</td></tr>
- <tr class="child_row_01"><td>张山</td><td>男</td><td>浙江宁波</td></tr>
- <tr class="child_row_01"><td>李四</td><td>女</td><td>浙江杭州</td></tr>
- <tr class="parent" id="row_02"><td colspan="">前台开发组</td></tr>
- <tr class="child_row_02"><td>王五</td><td>男</td><td>湖南长沙</td></tr>
- <tr class="child_row_02"><td>找六</td><td>男</td><td>浙江温州</td></tr>
- <tr class="parent" id="row_03"><td colspan="">后台开发组</td></tr>
- <tr class="child_row_03"><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
- <tr class="child_row_03"><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
- </tbody>
- </table>
- </body>
- </html>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <head>
- <title></title>
- <link href="css/style.css" rel="stylesheet" type="text/css" />
- <!-- 引入jQuery -->
- <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(function(){
- $('tr.parent').click(function(){ // 获取所谓的父行
- $(this)
- .toggleClass("selected") // 添加/删除高亮
- .siblings('.child_'+this.id).toggle(); // 隐藏/显示所谓的子行
- }).click();
- })
- </script>
- </head>
- <body>
- <table>
- <thead>
- <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
- </thead>
- <tbody>
- <tr class="parent" id="row_01"><td colspan="">前台设计组</td></tr>
- <tr class="child_row_01"><td>张山</td><td>男</td><td>浙江宁波</td></tr>
- <tr class="child_row_01"><td>李四</td><td>女</td><td>浙江杭州</td></tr>
- <tr class="parent" id="row_02"><td colspan="">前台开发组</td></tr>
- <tr class="child_row_02"><td>王五</td><td>男</td><td>湖南长沙</td></tr>
- <tr class="child_row_02"><td>找六</td><td>男</td><td>浙江温州</td></tr>
- <tr class="parent" id="row_03"><td colspan="">后台开发组</td></tr>
- <tr class="child_row_03"><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
- <tr class="child_row_03"><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
- </tbody>
- </table>
- </body>
- </html>
3.表格内容过滤
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <head>
- <title></title>
- <link href="css/style.css" rel="stylesheet" type="text/css" />
- <!-- 引入jQuery -->
- <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(function(){
- $("#filterName").keyup(function(){
- $("table tbody tr")
- .hide()
- .filter(":contains('"+( $(this).val() )+"')")
- .show();
- }).keyup();
- })
- </script>
- </head>
- <body>
- <div>
- <br/>
- 筛选:<input id="filterName" /><br/>
- </div>
- <table>
- <thead>
- <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
- </thead>
- <tbody>
- <tr><td>张山</td><td>男</td><td>浙江宁波</td></tr>
- <tr><td>李四</td><td>女</td><td>浙江杭州</td></tr>
- <tr><td>王五</td><td>男</td><td>湖南长沙</td></tr>
- <tr><td>找六</td><td>男</td><td>浙江温州</td></tr>
- <tr><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
- <tr><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
- <tr><td>王六</td><td>男</td><td>浙江杭州</td></tr>
- <tr><td>李字</td><td>女</td><td>浙江杭州</td></tr>
- <tr><td>李四</td><td>男</td><td>湖南长沙</td></tr>
- </tbody>
- </table>
- </body>
- </html>
4.控制字体大小
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title></title>
- <link href="css/style.css" rel="stylesheet" type="text/css" />
- <!-- 引入jQuery -->
- <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(function(){
- $("span").click(function(){
- var thisEle = $("#para").css("font-size");
- var textFontSize = parseFloat(thisEle , );
- var unit = thisEle.slice(-); //获取单位
- var cName = $(this).attr("class");
- if(cName == "bigger"){
- if( textFontSize <= ){
- textFontSize += ;
- }
- }else if(cName == "smaller"){
- if( textFontSize >= ){
- textFontSize -= ;
- }
- }
- $("#para").css("font-size", textFontSize + unit);
- });
- });
- </script>
- </head>
- <body>
- <div class="msg">
- <div class="msg_caption">
- <span class="bigger" >放大</span>
- <span class="smaller" >缩小</span>
- </div>
- <div>
- <p id="para">
- This is some text. This is some text. This is some text. This is some text. This
- is some text. This is some text. This is some text. This is some text. This is some
- text. This is some text. This is some text. This is some text. This is some text.
- This is some text. This is some text. This is some text. This is some text. This
- is some text. This is some text.
- </p>
- </div>
- </div>
- </body>
- </html>
5.选项卡
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title></title>
- <link href="css/style.css" rel="stylesheet" type="text/css" />
- <!-- 引入jQuery -->
- <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
- <script type="text/javascript" >
- //<![CDATA[
- $(function(){
- var $div_li =$("div.tab_menu ul li");
- $div_li.click(function(){
- $(this).addClass("selected") //当前<li>元素高亮
- .siblings().removeClass("selected"); //去掉其它同辈<li>元素的高亮
- var index = $div_li.index(this); // 获取当前点击的<li>元素 在 全部li元素中的索引。
- $("div.tab_box > div") //选取子节点。不选取子节点的话,会引起错误。如果里面还有div
- .eq(index).show() //显示 <li>元素对应的<div>元素
- .siblings().hide(); //隐藏其它几个同辈的<div>元素
- }).hover(function(){
- $(this).addClass("hover");
- },function(){
- $(this).removeClass("hover");
- })
- })
- //]]>
- </script>
- </head>
- <body>
- <div class="tab">
- <div class="tab_menu">
- <ul>
- <li class="selected">时事</li>
- <li>体育</li>
- <li>娱乐</li>
- </ul>
- </div>
- <div class="tab_box">
- <div>时事</div>
- <div class="hide">体育</div>
- <div class="hide">娱乐</div>
- </div>
- </div>
- </body>
- </html>
6.换肤
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" >
- <head>
- <title></title>
- <link href="css/default.css" rel="stylesheet" type="text/css" />
- <link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />
- <!-- 引入jQuery -->
- <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
- <!-- 引入jQuery的cookie插件 -->
- <script src="js/jquery.cookie.js" type="text/javascript"></script>
- <script type="text/javascript">
- //<![CDATA[
- $(function(){
- var $li =$("#skin li");
- $li.click(function(){
- switchSkin( this.id );
- });
- var cookie_skin = $.cookie( "MyCssSkin");
- if (cookie_skin) {
- switchSkin( cookie_skin );
- }
- });
- function switchSkin(skinName){
- $("#"+skinName).addClass("selected") //当前<li>元素选中
- .siblings().removeClass("selected"); //去掉其它同辈<li>元素的选中
- $("#cssfile").attr("href","css/"+ skinName +".css"); //设置不同皮肤
- $.cookie( "MyCssSkin" , skinName , { path: '/', expires: });
- }
- //]]>
- </script>
- </head>
- <body>
- <ul id="skin">
- <li id="skin_0" title="灰色" class="selected">灰色</li>
- <li id="skin_1" title="紫色">紫色</li>
- <li id="skin_2" title="红色">红色</li>
- <li id="skin_3" title="天蓝色">天蓝色</li>
- <li id="skin_4" title="橙色">橙色</li>
- <li id="skin_5" title="淡绿色">淡绿色</li>
- </ul>
- <div id="div_side_0">
- <div id="news">
- <h1 class="title">时事新闻</h1>
- </div>
- </div>
- <div id="div_side_1">
- <div id="game">
- <h1 class="title">娱乐新闻</h1>
- </div>
- </div>
- </body>
- </html>
PS:参考文献《锋利的jQuery》
第七章 jQuery操作表格及其它应用的更多相关文章
- jQuery系列 第七章 jQuery框架DOM操作
第七章 jQuery框架的选择器 jQuery框架继承和优化了JavaScript访问DOM对象的特性,我们使用jQuery框架提供的api可以更加方便的操作DOM对象. 7.1 创建DOM节点 使用 ...
- 超级简单的jquery操作表格(添加/删除行、添加/删除列)
利用jquery给指定的table添加一行.删除一行 <script language="javascript" src="./jquery.js"> ...
- Jquery操作表格多出一个内容行
目录 前言 需求 如何监听每一行点击,获取点击id 前后端 问题更新,ajax异步带来的问题 废弃使用HTML拼接 前言 我的前端实在是太差劲了,导致Jquery操作表格多出一个内容行,这个功能我都做 ...
- jquery操作表格 合并单元格
jquery操作table,合并单元格,合并相同的行 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列}) /** * ...
- JavaScript交互式网页设计 • 【第7章 jQuery操作 DOM】
全部章节 >>>> 本章目录 7.1 DOM 对象和 jQuery 对象 7.1.1 DOM 对象 7.1.2 jQuery 对象 7.1.3 jQuery 对象和 DOM ...
- jQuery操作表格(table)的常用方法、技巧汇总
摘录自:http://www.jb51.net/article/48943.htm 虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便 ...
- jquery操作表格总结
返回表格行 或 列的索引 td是列,tr是行: <script type="text/javascript"> $(document).ready(function() ...
- JQuery制作网页—— 第七章 jQuery中的事件与动画
1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...
- 三、jQuery--jQuery基础--jQuery基础课程--第5章 jQuery 操作DOM元素
1.使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值. 例如,使 ...
随机推荐
- UVA 11426 GCD - Extreme (II) (欧拉函数+筛法)
题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=70017#problem/O 题意是给你n,求所有gcd(i , j)的和,其中 ...
- android EditText控制光标的位置
利用自定义键盘,需要手动删除编辑框中的文本时,会根据光标的位置来删除字符.那么,如何来控制光标呢,android为我们提供了哪些方法,来处理光标呢? 这里提供几个自己写的方法,根据这些方法可以满足在光 ...
- ElasticSearch+Springboot实际应用:索引同步建设,搜索过程
1.介绍 springboot框架,众多自动化的部署和约定配置,造成了springboot的着手麻烦,熟练后可以快速快捷进行开发,常用作快捷开发的java底层框架.各位看官都是大神,自行体会. ...
- PHP之路,Day1 - PHP基础
本节内容 1.PHP介绍 2.第一个PHP脚本程序 3.PHP语言标记 4.指令分割符 5.程序注释 6.在程序中使用空白符的处理 7.变量 8.变量的类型 9.数据类型之间相互转换 ...
- 方法字段[C# 基础知识系列]专题二:委托的本质论
首先声明,我是一个菜鸟.一下文章中出现技术误导情况盖不负责 引言: 上一个专题已和大家分享了我懂得的——C#中为什么须要委托,专题中简略介绍了下委托是什么以及委托简略的应用的,在这个专题中将对委托做进 ...
- python的一些总结1
1.安装环境 window用户下载 python :https://www.python.org/downloads/release/python-2710/ 安装不解释.. 配置环境变量 找到 P ...
- zoj 2112 Dynamic Rankings 动态第k大 线段树套Treap
Dynamic Rankings Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.zju.edu.cn/onlinejudge/show ...
- Codeforces Gym 100002 E "Evacuation Plan" 费用流
"Evacuation Plan" Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/10 ...
- Codeforces Gym 100650B Countdown DFS
Problem B: CountdownTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/conte ...
- SAP ABAP程序下载器(增强版)
在实际的项目中运用过几次 Mass download 这个程序,发现下载ABAP代码还真是利器,目前最新的版本是1.4.4,已经n年没有更新过了.使用过程中,发现其导出的HTML格式的代码有问题,包括 ...