1. <!DOCTYPE html>
  2. <html lang="zh">
  3.     <head>
  4.         <meta charset="utf-8"/>
  5.         <title>007 切换数据表格的行列</title>
  6.         <style type="text/css">
  7.             table{
  8.                 border: 1px solid #ccc;
  9.                 font-size: 14px;
  10.                 }
  11.  
  12.                 table th, .header{
  13.                 background: orange;
  14.                 color: #fff;
  15.                 padding:10px;
  16.                 }
  17.  
  18.                 table td{
  19.                 padding:10px;
  20.             }
  21.         </style>
  22.         <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
  23.         <script type="text/javascript">
  24.             $(function() {
  25.                 $('#change').click(function(){
  26.                     var $tableNew = $('<table></table'),
  27.                         $tableOld = $('table');
  28.                     for (var i = 0; i < 4; i++) {
  29.                         var $trNew = $('<tr></tr>');
  30.                         for (var j = 0; j < 4; j++) {
  31.                             var $tdNew = $('<td></td>'),
  32.                                 content = $tableOld.find('tr:eq(' + j + ')').children().eq(i).html();
  33.                             $tdNew.html(content);
  34.                             if (j == 0) {
  35.                                 $tdNew.addClass('header');
  36.                             }
  37.                             $trNew.append($tdNew);
  38.                         }
  39.                         $tableNew.append($trNew);
  40.                     }
  41.                     $('body').append($tableNew);
  42.                 });
  43.             })
  44.         </script>
  45.     </head>
  46.     <body>
  47.         <table>
  48.             <tr>
  49.             <th>列1</th>
  50.             <th>列2</th>
  51.             <th>列3</th>
  52.             <th>列4</th>
  53.             </tr>
  54.             <tr>
  55.             <td>数据1-1</td>
  56.             <td>数据1-2</td>
  57.             <td>数据1-3</td>
  58.             <td>数据1-4</td>
  59.             </tr>
  60.             <tr>
  61.             <td>数据2-1</td>
  62.             <td>数据2-2</td>
  63.             <td>数据2-3</td>
  64.             <td>数据2-4</td>
  65.             </tr>
  66.             <tr>
  67.             <td>数据3-1</td>
  68.             <td>数据3-2</td>
  69.             <td>数据3-3</td>
  70.             <td>数据3-4</td>
  71.             </tr>
  72.         </table>
  73.         <button id="change">change</button>
  74.     </body>
  75. </html>

[jQuery编程挑战]007 切换数据表格的行列的更多相关文章

  1. jQuery两种方法添加数据表格到HTML

    jQ创建表格的两种方法 1.模板字符串法   $(function () {           //模板字符串的方式添加到页面           $('#btn').click(function ...

  2. [jQuery编程挑战]003 克隆一个页面元素及其相关事件

    挑战: a) 绑定一个点击方法到这个div,点击后此元素会淡出消失 b) 同时克隆一个新的div元素到页面,元素内容是前面div文字内容反向书写(即,sgatbg olleh),同样也具有上面的点击事 ...

  3. [jQuery编程挑战]001：实现页面元素加速动画效果

    要求: 页面包含两个HTML元素:一个按钮,一个小方块 动画要求:点击按钮,小方块从页面坐标300,300,加速移动到0,0 相关知识点: jQuery动画方法animate easing参数的设置 ...

  4. 【WorkTile赞助】jQuery编程挑战#009：生成两个div元素互相追逐的动画

    HTML页面: <!-- HTML代码片段中请勿添加<body>标签 //--> <div id="container"> <div id ...

  5. [jQuery编程挑战]008 生成逗号分隔数字

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

  6. [jQuery编程挑战]006 生成一个倒计时效果

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

  7. [jQuery编程挑战]005 使用最短的代码生成元素的闪烁效果

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

  8. [jQuery编程挑战]004 针对选择框词典式排序

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

  9. [jQuery编程挑战]002：实现一个转盘大抽奖

    body { background-color: #F2F2F2; text-align: center; } .container { position: relative; width: 500p ...

随机推荐

  1. (转)java多线程的一篇好文

    云转型基石ThinkServer特性解析 2013-05-29 10:47 佚名 importnew 字号:T | T 本文只是一些针对初学者或者新手的问题,如果你已经具备良好的基础,那么你可以跳过本 ...

  2. poj 3575 Crosses and Crosses（SG函数）

    Crosses and Crosses Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 3063   Accepted: 11 ...

  3. Bzoj 3781: 小B的询问 莫队,分块,暴力

    3781: 小B的询问 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 426  Solved: 284[Submit][Status][Discuss ...

  4. Hibernate自定义数据库查询（排序、输出条数）

    Hibernate数据库操作类(eg:TexDAO.java) /* * queryString HQL语句,first开始条数, max输出条数 ,norder排序 * 例: List lis = ...

  5. PPT扁平化风格设计手册

    钱文嘉:颜色选择,搭配 http://www.pptfans.cn/341917.html

  6. JAVA操作Excel时文字自适应单元格的宽度设置方法

    使用JAVA操作Excel通常都使用JXL,方法很简单网上也有很多的教程,然后往往一些细节性的问题却导致我们这些Programmer苦恼不已.这两天帮一个朋友做一个Excel表格自动生成的小软件,就遇 ...

  7. android 45 通知

    package com.sxt.day07_01; import android.app.Activity; import android.app.Notification; import andro ...

  8. GCC相关的环境变量

    介绍GCC在编译阶段和程序运行阶段用到的环境变量. GCC编译时用到的环境变量 GCC编译时用到的变量. C_INCLUDE_PATH GCC编译时查找头文件的目录列表.比如: echo $C_INC ...

  9. Javascript 函数和模块定义

    匿名函数 // calculator.js(function(root) {  var calculator = {    sum: function(a, b) { return a + b; }  ...

  10. 使用fastjson前台报406的问题解决方法

    返回的json数据前台页面报406,而后台没有报错,下面为解决方法 <?xml version="1.0" encoding="UTF-8"?> & ...