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. Spring Data JPA 教程(翻译)

    写那些数据挖掘之类的博文 写的比较累了,现在翻译一下关于spring data jpa的文章,觉得轻松多了. 翻译正文: 你有木有注意到,使用Java持久化的API的数据访问代码包含了很多不必要的模式 ...

  2. ORA-01033: ORACLE initialization or shutdown in progress 实用的处理方法

    ORA-01033: ORACLE initialization or shutdown in progress 实用的处理方法,此问题通常是由于电脑非正常关机造成的,我们可以用下面的方法查找出是那个 ...

  3. php 基本符号

    用这么久了,竟然PHP的基本符号都没有认全,看到@号还查了半天才知道什么意思.把基本符号列表帖一下吧,需要的朋友可以参考~ 注解符号:          // 单行注解              /* ...

  4. 【不积跬步,无以致千里】linux下如何查看自己的外网IP

    局域网的服务器是通过ADSL路由器连接外网的,但ADSL是从ISP运营商那儿通过动态获得IP的,那么我怎么知道自己的外网地址是多少呢?今天得到几个办法:curl -s http://whatismyi ...

  5. 【转】C++ static关键字

    原文:http://blog.csdn.net/hackbuteer1/article/details/7487694 C++的static有两种用法:面向过程程序设计中的static和面向对象程序设 ...

  6. Python 删除目录中特定文件

    代码如下,使用了递归: import sys currDir = sys.path[] import os def removeFile(dir,postfix): if os.path.isdir( ...

  7. POJ 3522 Slim Span 最小差值生成树

    Slim Span Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://poj.org/problem?id=3522 Description Gi ...

  8. C#调用WORD处理的实例代码(包含excel)

    最近程序人生(http://www.manong123.com)一个朋友让我帮他做一个小功能,其实就是把WORD文档里的内容存到数据库里去,可以实现搜索并转EXCEL的功能,需求很简单,想不到加上部署 ...

  9. IOS 常用第三方库

    名称 特性 效果图 FXBlurView 实时背景模糊效果   FDFullscreenPopGesture 让UINavigationController在屏幕任何位置均可滑动返回 NJKWebVi ...

  10. 【Github教程】史上最全github用法:github入门到精通

    原文 http://www.eoeandroid.com/thread-274556-1-1.html [初识Github] 首先让我们大家一起喊一句"Hello Github". ...