<!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. MySQL索引原理与慢查询优化

    索引目的 索引的目的在于提高查询效率,可以类比字典,如果要查“mysql”这个单词,我们肯定需要定位到m字母,然后从下往下找到y字母,再找到剩下的sql.如果没有索引,那么你可能需要把所有单词看一遍才 ...

  2. 大牛博客！Spark / Hadoop / Kafka / HBase / Storm

    在这里,非常感谢下面的著名大牛们,一路的帮助和学习,给予了我很大的动力! 有了Hadoop,再次有了Spark,一次又一次,一晚又一晚的努力相伴! HBase简介(很好的梳理资料) 1. 博客主页:h ...

  3. java 检查是否是数组 检查是否是空数组 检查数组是否包含某个元素

    /** * Determine whether the given object is an array: * either an Object array or a primitive array. ...

  4. Milk Patterns - poj 3261 （求重复k次的最长子串）

    题目大意:给你一个数组,求这个数组里面至少重复k次的子串.   分析:后缀数组的练手题目...不过给的数字比较大,可以先离散化处理一下即可.   代码如下: ===================== ...

  5. Spring 连接数据库测试

    1.编写测试对象类 package model; import java.io.Serializable; /** * Created by xumao on 2016/12/5. */ public ...

  6. [转]C++ map容器用法

    C++ map的基本操作和使用 原文地址:http://blog.sina.com.cn/s/blog_61533c9b0100fa7w.html Map是c++的一个标准容器,她提供了很好一对一的关 ...

  7. 【Android - V】之Toolbar的使用

    Toolbar是Android V7包中的一个控件,用来代替Action Bar作为界面的头部标题栏布局.Toolbar相对于Action Bar的特点是更加灵活,可以显示在任何位置. 首先先来看To ...

  8. 多次读取请求request里数据

    如果请求是GET方法,可以直接通过getParameter(String param)方法读取指定参数,可读取多次: 而POST方法的参数是存储在输入流中,只能读一次,不能多次读取. 有时需要在fil ...

  9. Seeking USB Serial Com Port in Windows Automatically : via PID VID

    After you read previous article, you might know how to operate a com port in Windows.    But that ex ...

  10. 用的最多的Android Studio 快捷键

    1.Ctrl+D,Ctrl+C 复制删除整一行 2.Ctrl+Alt+L 格式化代码 看起来更好看 3.Ctrl+Q 查看函数API定义 4.Atl+方向键 切换不同文档 平时用快捷键能够提高效率,少 ...