第七章 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(属性名,属性值)格式则是设置元素属性名的值. 例如,使 ...
随机推荐
- Spring Data JPA 教程(翻译)
写那些数据挖掘之类的博文 写的比较累了,现在翻译一下关于spring data jpa的文章,觉得轻松多了. 翻译正文: 你有木有注意到,使用Java持久化的API的数据访问代码包含了很多不必要的模式 ...
- ORA-01033: ORACLE initialization or shutdown in progress 实用的处理方法
ORA-01033: ORACLE initialization or shutdown in progress 实用的处理方法,此问题通常是由于电脑非正常关机造成的,我们可以用下面的方法查找出是那个 ...
- php 基本符号
用这么久了,竟然PHP的基本符号都没有认全,看到@号还查了半天才知道什么意思.把基本符号列表帖一下吧,需要的朋友可以参考~ 注解符号: // 单行注解 /* ...
- 【不积跬步,无以致千里】linux下如何查看自己的外网IP
局域网的服务器是通过ADSL路由器连接外网的,但ADSL是从ISP运营商那儿通过动态获得IP的,那么我怎么知道自己的外网地址是多少呢?今天得到几个办法:curl -s http://whatismyi ...
- 【转】C++ static关键字
原文:http://blog.csdn.net/hackbuteer1/article/details/7487694 C++的static有两种用法:面向过程程序设计中的static和面向对象程序设 ...
- Python 删除目录中特定文件
代码如下,使用了递归: import sys currDir = sys.path[] import os def removeFile(dir,postfix): if os.path.isdir( ...
- POJ 3522 Slim Span 最小差值生成树
Slim Span Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://poj.org/problem?id=3522 Description Gi ...
- C#调用WORD处理的实例代码(包含excel)
最近程序人生(http://www.manong123.com)一个朋友让我帮他做一个小功能,其实就是把WORD文档里的内容存到数据库里去,可以实现搜索并转EXCEL的功能,需求很简单,想不到加上部署 ...
- IOS 常用第三方库
名称 特性 效果图 FXBlurView 实时背景模糊效果 FDFullscreenPopGesture 让UINavigationController在屏幕任何位置均可滑动返回 NJKWebVi ...
- 【Github教程】史上最全github用法:github入门到精通
原文 http://www.eoeandroid.com/thread-274556-1-1.html [初识Github] 首先让我们大家一起喊一句"Hello Github". ...