<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="utf-8"/>

        <title>007 切换数据表格的行列</title>

        <style type="text/css">

            table{

                border: 1px solid #ccc;

                font-size: 14px;

                }

                table th, .header{

                background: orange;

                color: #fff;

                padding:10px;

                }

                table td{

                padding:10px;

            }

        </style>

        <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>

        <script type="text/javascript">

            $(function() {

                $('#change').click(function(){

                    var $tableNew = $('<table></table'),

                        $tableOld = $('table');

                    for (var i = 0; i < 4; i++) {

                        var $trNew = $('<tr></tr>');

                        for (var j = 0; j < 4; j++) {

                            var $tdNew = $('<td></td>'),

                                content = $tableOld.find('tr:eq(' + j + ')').children().eq(i).html();

                            $tdNew.html(content);

                            if (j == 0) {

                                $tdNew.addClass('header');

                            }

                            $trNew.append($tdNew);

                        }

                        $tableNew.append($trNew);

                    }

                    $('body').append($tableNew);

                });

            })

        </script>

    </head>

    <body>

        <table>

            <tr>

            <th>列1</th>

            <th>列2</th>

            <th>列3</th>

            <th>列4</th>

            </tr>

            <tr>

            <td>数据1-1</td>

            <td>数据1-2</td>

            <td>数据1-3</td>

            <td>数据1-4</td>

            </tr>

            <tr>

            <td>数据2-1</td>

            <td>数据2-2</td>

            <td>数据2-3</td>

            <td>数据2-4</td>

            </tr>

            <tr>

            <td>数据3-1</td>

            <td>数据3-2</td>

            <td>数据3-3</td>

            <td>数据3-4</td>

            </tr>

        </table>

        <button id="change">change</button>

    </body>

</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. spring框架DI(IOC)和AOP 原理及方案

    http://www.blogjava.net/killme2008/archive/2007/04/20/112160.html http://www.oschina.net/code/snippe ...

  2. CPP数组

    数组为函数参数,求出一组数中的最大者;

  3. [置顶] Android布局管理器 - 详细解析布局实现

    布局管理器都是以ViewGroup为基类派生出来的; 使用布局管理器可以适配不同手机屏幕的分辨率,尺寸大小; 布局管理器之间的继承关系 : 在上面的UML图中可以看出, 绝对布局 帧布局 网格布局 相 ...

  4. 如何彻底删除SVN中的文件和文件夹(附恢复方法)

    在SVN中如果删除某个文件或文件夹也可以在历史记录中进行找回,有的时候需要彻底删除某些文件,即不希望通过历史记录进行恢复,需要在服务器上对SVN的数据进行重新整理 这里假设SVN项目的目录为 /dat ...

  5. jquery做个日期选择适用于手机端

    第一步:做个 文本框用于显示年月日的 第二步:点击文本框触发bootstrap模态框并显示 第三步:我是建一个外部js页面写的 js中获得当前时间是年份和月份,形如:201208       //获取 ...

  6. Android编程动态创建视图View的方法

    在Android开 发中,在Activity中关联视图View是一般使用setContentView方法,该方法一种参数是使用XML资源直接创 建:setContentView (int layout ...

  7. TCP 函数

    [root@localhost tt]# man listen LISTEN() Linux Programmer’s Manual LISTEN() NAME listen - listen for ...

  8. systrace跟踪 Android性能优化

    http://blog.csdn.net/oujunli/article/details/8138172 http://blog.csdn.net/oujunli/article/details/50 ...

  9. MapReduce实战：查找相同字母组成的单词

    1.项目需求 一本英文书籍包含成千上万个单词,现在我们需要在大量的单词中,找出相同字母组成的所有单词 2.数据集 下面是一本英文书籍截取的一部分单词内容(书籍内容是随意写的,主要目的是实现这种需求) ...

  10. css背景图与html插入img的区别

    一直以来都认为css背景图与直接插入img图片的效果是差不多的,直到最近拜读了一位大神的作品,发现大部分图片都是通过背景图形式显示的,于是通过搜索各相关资料,在此总结了下二者的区别: 1. css中的 ...