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 624 - CD (01背包 + 打印物品)

    题目链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...

  2. RSS阅读器(一)——dom4j读取xml(opml)文件

    接触java不久,偶有收获,最近想做一个web版RSS阅读器来锻炼一下.手头有几个从不同版本的foxmail中导出的opml文件,大家应该都知道,opml文件就是xml格式的.那么就先从这里入手,练习 ...

  3. java functional syntax overview

    Defining a Functional Interface @FunctionalInterface public interface TailCall<T> { TailCall&l ...

  4. Wifi热点工具-青青草原WiFi

    有时只有有线网络,但手机需要上网,这时需要将笔记本作为无线热点. 青青草原WiFi,这个工具用起来挺方便,http://www.22zy.net/.

  5. mongodb 、nosql、 redis、 memcached 是什么?

    mongodb 是一个基于文档的数据库,所有数据是从磁盘上进行读写的.MongoDB善长的是对无模式JSON数据的查询.而Redis是一个基于内存的键值数据库,它由C语言实现的,与Nginx/ Nod ...

  6. SCOM2007R2安装和报表服务器配置

    SCOM2007R2默认安装不可以直接支持SQL Server2008R2,需要SQL Server 2008SP1. 如果数据库安装在另一台计算机上,则在安装了SQL Server的计算机上先运行S ...

  7. Codeforces Round #332 (Div. 2) C. Day at the Beach 线段树

    C. Day at the Beach Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/599/p ...

  8. Codeforces Round #329 (Div. 2) A. 2Char 暴力

    A. 2Char Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/593/problem/A De ...

  9. GDI+与图形编程研究

    GDI+的基本概念 GDI+的常用对象,包括Graphics.Font.Brush.Pen等对象的创建和使用 常用图形的绘制 Color结构.Point结构和Rectangle结构 1.GDI+的概念 ...

  10. delphi 在 DragDrop 的时候,滚动 TreeView

    在 DragDrop 的时候,滚动 TreeView 当高度不够的时候   procedure TForm1.TreeView1DragOver(Sender, Source: TObject; X, ...