1.表格变色

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <title></title>
  5. <link href="css/style.css" rel="stylesheet" type="text/css" />
  6. <!-- 引入jQuery -->
  7. <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  8. <script type="text/javascript">
  9. $(function(){
  10. $("tbody>tr:odd").addClass("odd"); //先排除第一行,然后给奇数行添加样式
  11. $("tbody>tr:even").addClass("even"); //先排除第一行,然后给偶数行添加样式
  12. $('tbody>tr').click(function() {
  13. $(this)
  14. .addClass('selected')
  15. .siblings().removeClass('selected')
  16. .end()
  17. .find(':radio').attr('checked',true);
  18. });
  19. // 如果单选框默认情况下是选择的,则高色.
  20. // $('table :radio:checked').parent().parent().addClass('selected');
  21. //简化:
  22. $('table :radio:checked').parents("tr").addClass('selected');
  23. //再简化:
  24. //$('tbody>tr:has(:checked)').addClass('selected');
  25.  
  26. })
  27. </script>
  28. </head>
  29. <body>
  30. <table>
  31. <thead>
  32. <tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr>
  33. </thead>
  34. <tbody>
  35. <tr><td><input type="radio" name="choice" value=""/></td>
  36. <td>张山</td><td></td><td>浙江宁波</td></tr>
  37. <tr><td><input type="radio" name="choice" value="" /></td>
  38. <td>李四</td><td></td><td>浙江杭州</td></tr>
  39. <tr><td><input type="radio" name="choice" value="" checked='checked' /></td>
  40. <td>王五</td><td></td><td>湖南长沙</td></tr>
  41. <tr><td><input type="radio" name="choice" value="" /></td>
  42. <td>找六</td><td></td><td>浙江温州</td></tr>
  43. <tr><td><input type="radio" name="choice" value="" /></td>
  44. <td>Rain</td><td></td><td>浙江杭州</td></tr>
  45. <tr><td><input type="radio" name="choice" value="" /></td>
  46. <td>MAXMAN</td><td></td><td>浙江杭州</td></tr>
  47. </tbody>
  48. </table>
  49. </body>
  50. </html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <title></title>
  5. <link href="css/style.css" rel="stylesheet" type="text/css" />
  6. <!-- 引入jQuery -->
  7. <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  8. <script type="text/javascript">
  9. $(function(){
  10. $("tbody>tr:odd").addClass("odd"); //先排除第一行,然后给奇数行添加样式
  11. $("tbody>tr:even").addClass("even"); //先排除第一行,然后给偶数行添加样式
  12. $('tbody>tr').click(function() {
  13. if ($(this).hasClass('selected')) {
  14. $(this)
  15. .removeClass('selected')
  16. .find(':checkbox').attr('checked',false);
  17. }else{
  18. $(this)
  19. .addClass('selected')
  20. .find(':checkbox').attr('checked',true);
  21. }
  22. });
  23. // 如果复选框默认情况下是选择的,则高色.
  24. // $('table :checkbox:checked').parent().parent().addClass('selected');
  25. //简化:
  26. $('table :checkbox:checked').parents("tr").addClass('selected');
  27. //$('tbody>tr:has(:checked)').addClass('selected');
  28. })
  29. </script>
  30. </head>
  31. <body>
  32. <table>
  33. <thead>
  34. <tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr>
  35. </thead>
  36. <tbody>
  37. <tr><td><input type="checkbox" name="choice" value=""/></td>
  38. <td>张山</td><td></td><td>浙江宁波</td></tr>
  39. <tr><td><input type="checkbox" name="choice" value="" /></td>
  40. <td>李四</td><td></td><td>浙江杭州</td></tr>
  41. <tr><td><input type="checkbox" name="choice" value="" checked='checked' /></td>
  42. <td>王五</td><td></td><td>湖南长沙</td></tr>
  43. <tr><td><input type="checkbox" name="choice" value="" /></td>
  44. <td>找六</td><td></td><td>浙江温州</td></tr>
  45. <tr><td><input type="checkbox" name="choice" value="" /></td>
  46. <td>Rain</td><td></td><td>浙江杭州</td></tr>
  47. <tr><td><input type="checkbox" name="choice" value="" /></td>
  48. <td>MAXMAN</td><td></td><td>浙江杭州</td></tr>
  49. </tbody>
  50. </table>
  51. </body>
  52. </html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <title></title>
  5. <link href="css/style.css" rel="stylesheet" type="text/css" />
  6. <!-- 引入jQuery -->
  7. <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  8. <script type="text/javascript">
  9. $(function(){
  10. $("tbody>tr:odd").addClass("odd");
  11. $("tbody>tr:even").addClass("even");
  12. $('tbody>tr').click(function() {
  13. //判断当前是否选中
  14. var hasSelected=$(this).hasClass('selected');
  15. //如果选中,则移出selected类,否则就加上selected类
  16. $(this)[hasSelected?"removeClass":"addClass"]('selected')
  17. //查找内部的checkbox,设置对应的属性。
  18. .find(':checkbox').attr('checked',!hasSelected);
  19. });
  20. // 如果复选框默认情况下是选择的,则高色.
  21. $('tbody>tr:has(:checked)').addClass('selected');
  22. })
  23. </script>
  24. </head>
  25. <body>
  26. <table>
  27. <thead>
  28. <tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr>
  29. </thead>
  30. <tbody>
  31. <tr><td><input type="checkbox" name="choice" value=""/></td>
  32. <td>张山</td><td></td><td>浙江宁波</td></tr>
  33. <tr><td><input type="checkbox" name="choice" value="" /></td>
  34. <td>李四</td><td></td><td>浙江杭州</td></tr>
  35. <tr><td><input type="checkbox" name="choice" value="" checked='checked' /></td>
  36. <td>王五</td><td></td><td>湖南长沙</td></tr>
  37. <tr><td><input type="checkbox" name="choice" value="" /></td>
  38. <td>找六</td><td></td><td>浙江温州</td></tr>
  39. <tr><td><input type="checkbox" name="choice" value="" /></td>
  40. <td>Rain</td><td></td><td>浙江杭州</td></tr>
  41. <tr><td><input type="checkbox" name="choice" value="" /></td>
  42. <td>MAXMAN</td><td></td><td>浙江杭州</td></tr>
  43. </tbody>
  44. </table>
  45. </body>
  46. </html>

  2.表格展开收缩

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <title></title>
  5. <link href="css/style.css" rel="stylesheet" type="text/css" />
  6. <!-- 引入jQuery -->
  7. <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  8. <script type="text/javascript">
  9. $(function(){
  10. $('tr.parent').click(function(){ // 获取所谓的父行
  11. $(this)
  12. .toggleClass("selected") // 添加/删除高亮
  13. .siblings('.child_'+this.id).toggle(); // 隐藏/显示所谓的子行
  14. });
  15. })
  16. </script>
  17. </head>
  18. <body>
  19. <table>
  20. <thead>
  21. <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
  22. </thead>
  23. <tbody>
  24. <tr class="parent" id="row_01"><td colspan="">前台设计组</td></tr>
  25. <tr class="child_row_01"><td>张山</td><td></td><td>浙江宁波</td></tr>
  26. <tr class="child_row_01"><td>李四</td><td></td><td>浙江杭州</td></tr>
  27.  
  28. <tr class="parent" id="row_02"><td colspan="">前台开发组</td></tr>
  29. <tr class="child_row_02"><td>王五</td><td></td><td>湖南长沙</td></tr>
  30. <tr class="child_row_02"><td>找六</td><td></td><td>浙江温州</td></tr>
  31.  
  32. <tr class="parent" id="row_03"><td colspan="">后台开发组</td></tr>
  33. <tr class="child_row_03"><td>Rain</td><td></td><td>浙江杭州</td></tr>
  34. <tr class="child_row_03"><td>MAXMAN</td><td></td><td>浙江杭州</td></tr>
  35. </tbody>
  36. </table>
  37.  
  38. </body>
  39. </html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <title></title>
  5. <link href="css/style.css" rel="stylesheet" type="text/css" />
  6. <!-- 引入jQuery -->
  7. <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  8. <script type="text/javascript">
  9. $(function(){
  10. $('tr.parent').click(function(){ // 获取所谓的父行
  11. $(this)
  12. .toggleClass("selected") // 添加/删除高亮
  13. .siblings('.child_'+this.id).toggle(); // 隐藏/显示所谓的子行
  14. }).click();
  15. })
  16. </script>
  17. </head>
  18. <body>
  19. <table>
  20. <thead>
  21. <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
  22. </thead>
  23. <tbody>
  24. <tr class="parent" id="row_01"><td colspan="">前台设计组</td></tr>
  25. <tr class="child_row_01"><td>张山</td><td></td><td>浙江宁波</td></tr>
  26. <tr class="child_row_01"><td>李四</td><td></td><td>浙江杭州</td></tr>
  27. <tr class="parent" id="row_02"><td colspan="">前台开发组</td></tr>
  28. <tr class="child_row_02"><td>王五</td><td></td><td>湖南长沙</td></tr>
  29. <tr class="child_row_02"><td>找六</td><td></td><td>浙江温州</td></tr>
  30. <tr class="parent" id="row_03"><td colspan="">后台开发组</td></tr>
  31. <tr class="child_row_03"><td>Rain</td><td></td><td>浙江杭州</td></tr>
  32. <tr class="child_row_03"><td>MAXMAN</td><td></td><td>浙江杭州</td></tr>
  33. </tbody>
  34. </table>
  35. </body>
  36. </html>

  3.表格内容过滤

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <title></title>
  5. <link href="css/style.css" rel="stylesheet" type="text/css" />
  6. <!-- 引入jQuery -->
  7. <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  8. <script type="text/javascript">
  9. $(function(){
  10. $("#filterName").keyup(function(){
  11. $("table tbody tr")
  12. .hide()
  13. .filter(":contains('"+( $(this).val() )+"')")
  14. .show();
  15. }).keyup();
  16. })
  17. </script>
  18. </head>
  19. <body>
  20. <div>
  21. <br/>
  22. 筛选:<input id="filterName" /><br/>
  23. </div>
  24. <table>
  25. <thead>
  26. <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
  27. </thead>
  28. <tbody>
  29. <tr><td>张山</td><td></td><td>浙江宁波</td></tr>
  30. <tr><td>李四</td><td></td><td>浙江杭州</td></tr>
  31. <tr><td>王五</td><td></td><td>湖南长沙</td></tr>
  32. <tr><td>找六</td><td></td><td>浙江温州</td></tr>
  33. <tr><td>Rain</td><td></td><td>浙江杭州</td></tr>
  34. <tr><td>MAXMAN</td><td></td><td>浙江杭州</td></tr>
  35. <tr><td>王六</td><td></td><td>浙江杭州</td></tr>
  36. <tr><td>李字</td><td></td><td>浙江杭州</td></tr>
  37. <tr><td>李四</td><td></td><td>湖南长沙</td></tr>
  38. </tbody>
  39. </table>
  40. </body>
  41. </html>

  4.控制字体大小

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title></title>
  6. <link href="css/style.css" rel="stylesheet" type="text/css" />
  7. <!-- 引入jQuery -->
  8. <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  9. <script type="text/javascript">
  10. $(function(){
  11. $("span").click(function(){
  12. var thisEle = $("#para").css("font-size");
  13. var textFontSize = parseFloat(thisEle , );
  14. var unit = thisEle.slice(-); //获取单位
  15. var cName = $(this).attr("class");
  16. if(cName == "bigger"){
  17. if( textFontSize <= ){
  18. textFontSize += ;
  19. }
  20. }else if(cName == "smaller"){
  21. if( textFontSize >= ){
  22. textFontSize -= ;
  23. }
  24. }
  25. $("#para").css("font-size", textFontSize + unit);
  26. });
  27. });
  28. </script>
  29. </head>
  30. <body>
  31. <div class="msg">
  32. <div class="msg_caption">
  33. <span class="bigger" >放大</span>
  34. <span class="smaller" >缩小</span>
  35. </div>
  36. <div>
  37. <p id="para">
  38. This is some text. This is some text. This is some text. This is some text. This
  39. is some text. This is some text. This is some text. This is some text. This is some
  40. text. This is some text. This is some text. This is some text. This is some text.
  41. This is some text. This is some text. This is some text. This is some text. This
  42. is some text. This is some text.
  43. </p>
  44. </div>
  45. </div>
  46. </body>
  47. </html>

  5.选项卡

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title></title>
  6. <link href="css/style.css" rel="stylesheet" type="text/css" />
  7. <!-- 引入jQuery -->
  8. <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  9. <script type="text/javascript" >
  10. //<![CDATA[
  11. $(function(){
  12. var $div_li =$("div.tab_menu ul li");
  13. $div_li.click(function(){
  14. $(this).addClass("selected") //当前<li>元素高亮
  15. .siblings().removeClass("selected"); //去掉其它同辈<li>元素的高亮
  16. var index = $div_li.index(this); // 获取当前点击的<li>元素 在 全部li元素中的索引。
  17. $("div.tab_box > div") //选取子节点。不选取子节点的话,会引起错误。如果里面还有div
  18. .eq(index).show() //显示 <li>元素对应的<div>元素
  19. .siblings().hide(); //隐藏其它几个同辈的<div>元素
  20. }).hover(function(){
  21. $(this).addClass("hover");
  22. },function(){
  23. $(this).removeClass("hover");
  24. })
  25. })
  26. //]]>
  27. </script>
  28. </head>
  29. <body>
  30. <div class="tab">
  31. <div class="tab_menu">
  32. <ul>
  33. <li class="selected">时事</li>
  34. <li>体育</li>
  35. <li>娱乐</li>
  36. </ul>
  37. </div>
  38. <div class="tab_box">
  39. <div>时事</div>
  40. <div class="hide">体育</div>
  41. <div class="hide">娱乐</div>
  42. </div>
  43. </div>
  44. </body>
  45. </html>

  6.换肤

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3. <head>
  4. <title></title>
  5. <link href="css/default.css" rel="stylesheet" type="text/css" />
  6. <link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />
  7. <!-- 引入jQuery -->
  8. <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  9. <!-- 引入jQuery的cookie插件 -->
  10. <script src="js/jquery.cookie.js" type="text/javascript"></script>
  11. <script type="text/javascript">
  12. //<![CDATA[
  13. $(function(){
  14. var $li =$("#skin li");
  15. $li.click(function(){
  16. switchSkin( this.id );
  17. });
  18. var cookie_skin = $.cookie( "MyCssSkin");
  19. if (cookie_skin) {
  20. switchSkin( cookie_skin );
  21. }
  22. });
  23. function switchSkin(skinName){
  24. $("#"+skinName).addClass("selected") //当前<li>元素选中
  25. .siblings().removeClass("selected"); //去掉其它同辈<li>元素的选中
  26. $("#cssfile").attr("href","css/"+ skinName +".css"); //设置不同皮肤
  27. $.cookie( "MyCssSkin" , skinName , { path: '/', expires: });
  28. }
  29. //]]>
  30. </script>
  31. </head>
  32. <body>
  33. <ul id="skin">
  34. <li id="skin_0" title="灰色" class="selected">灰色</li>
  35. <li id="skin_1" title="紫色">紫色</li>
  36. <li id="skin_2" title="红色">红色</li>
  37. <li id="skin_3" title="天蓝色">天蓝色</li>
  38. <li id="skin_4" title="橙色">橙色</li>
  39. <li id="skin_5" title="淡绿色">淡绿色</li>
  40. </ul>
  41. <div id="div_side_0">
  42. <div id="news">
  43. <h1 class="title">时事新闻</h1>
  44. </div>
  45. </div>
  46. <div id="div_side_1">
  47. <div id="game">
  48. <h1 class="title">娱乐新闻</h1>
  49. </div>
  50. </div>
  51. </body>
  52. </html>

PS:参考文献《锋利的jQuery》

第七章 jQuery操作表格及其它应用的更多相关文章

  1. jQuery系列 第七章 jQuery框架DOM操作

    第七章 jQuery框架的选择器 jQuery框架继承和优化了JavaScript访问DOM对象的特性,我们使用jQuery框架提供的api可以更加方便的操作DOM对象. 7.1 创建DOM节点 使用 ...

  2. 超级简单的jquery操作表格(添加/删除行、添加/删除列)

    利用jquery给指定的table添加一行.删除一行 <script language="javascript" src="./jquery.js"> ...

  3. Jquery操作表格多出一个内容行

    目录 前言 需求 如何监听每一行点击,获取点击id 前后端 问题更新,ajax异步带来的问题 废弃使用HTML拼接 前言 我的前端实在是太差劲了,导致Jquery操作表格多出一个内容行,这个功能我都做 ...

  4. jquery操作表格 合并单元格

    jquery操作table,合并单元格,合并相同的行 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列}) /** * ...

  5. JavaScript交互式网页设计 • 【第7章 jQuery操作 DOM】

    全部章节   >>>> 本章目录 7.1 DOM 对象和 jQuery 对象 7.1.1 DOM 对象 7.1.2 jQuery 对象 7.1.3 jQuery 对象和 DOM ...

  6. jQuery操作表格(table)的常用方法、技巧汇总

    摘录自:http://www.jb51.net/article/48943.htm 虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便 ...

  7. jquery操作表格总结

    返回表格行 或 列的索引 td是列,tr是行: <script type="text/javascript"> $(document).ready(function() ...

  8. JQuery制作网页—— 第七章 jQuery中的事件与动画

    1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...

  9. 三、jQuery--jQuery基础--jQuery基础课程--第5章 jQuery 操作DOM元素

    1.使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值. 例如,使 ...

随机推荐

  1. UVA 11426 GCD - Extreme (II) (欧拉函数+筛法)

    题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=70017#problem/O 题意是给你n,求所有gcd(i , j)的和,其中 ...

  2. android EditText控制光标的位置

    利用自定义键盘,需要手动删除编辑框中的文本时,会根据光标的位置来删除字符.那么,如何来控制光标呢,android为我们提供了哪些方法,来处理光标呢? 这里提供几个自己写的方法,根据这些方法可以满足在光 ...

  3. ElasticSearch+Springboot实际应用:索引同步建设,搜索过程

    1.介绍 springboot框架,众多自动化的部署和约定配置,造成了springboot的着手麻烦,熟练后可以快速快捷进行开发,常用作快捷开发的java底层框架.各位看官都是大神,自行体会.     ...

  4. PHP之路,Day1 - PHP基础

    本节内容  1.PHP介绍  2.第一个PHP脚本程序  3.PHP语言标记  4.指令分割符  5.程序注释  6.在程序中使用空白符的处理  7.变量  8.变量的类型  9.数据类型之间相互转换 ...

  5. 方法字段[C# 基础知识系列]专题二:委托的本质论

    首先声明,我是一个菜鸟.一下文章中出现技术误导情况盖不负责 引言: 上一个专题已和大家分享了我懂得的——C#中为什么须要委托,专题中简略介绍了下委托是什么以及委托简略的应用的,在这个专题中将对委托做进 ...

  6. python的一些总结1

    1.安装环境 window用户下载 python :https://www.python.org/downloads/release/python-2710/ 安装不解释.. 配置环境变量  找到 P ...

  7. zoj 2112 Dynamic Rankings 动态第k大 线段树套Treap

    Dynamic Rankings Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.zju.edu.cn/onlinejudge/show ...

  8. Codeforces Gym 100002 E "Evacuation Plan" 费用流

    "Evacuation Plan" Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/10 ...

  9. Codeforces Gym 100650B Countdown DFS

    Problem B: CountdownTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/conte ...

  10. SAP ABAP程序下载器(增强版)

    在实际的项目中运用过几次 Mass download 这个程序,发现下载ABAP代码还真是利器,目前最新的版本是1.4.4,已经n年没有更新过了.使用过程中,发现其导出的HTML格式的代码有问题,包括 ...