<!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. hdu 4278 Faulty Odometer

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4278 #include<cstdio> #include<cstring> # ...

  2. HTML --- 盒模型

    绝对对位 position:absolute; 当一个元素设定了绝对对位, 如果他的父元素有设置定位(不管是绝对还是相对定位),那么他的坐标就是相当于父元素的左上角 进行定位(即 left:1px;t ...

  3. spring项目中监听器作用-ContextLoaderListener(转)

    1 spring框架的启动入口 ContextLoaderListener 2 作用:在启动Web 容器时,自动装配Spring applicationContext.xml 的配置信息. 因为它实现 ...

  4. android十六进制颜色代码转换为int类型数值

    android开发中将十六进制颜色代码转换为int类型数值方法:Color.parseColor("#00CCFF")返回int数值;

  5. Notepad++中的复活节彩蛋(easter egg)

    Notepad++是windows下的一个强大的文本编辑器; 它免费,开源, 比windows自带的记事本强大百倍; 我自己的感觉: 1.打开超大的文本文件,比方100M大小的文本格式的数据,记事本会 ...

  6. Qt解析XML文件（QXmlStreamReader）

    (2013-08-03 10:53:53) 转载▼       如何使用QXmlStreamReader来解析格式良好的XML,Qt的文档中指出,它是一种更快.更方便的Qt自己的SAX解析器(QXml ...

  7. java格式处理工具类

    import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.io.IOExceptio ...

  8. Java基础知识强化之集合框架笔记22：List集合的三个子类的特点（面试题）

    1. List:(面试题List的子类特点)(1)ArrayList: 底层数据结构是数组,查询快,增删慢. 线程不安全,效率高.(2)Vector: 底层数据结构是数组,查询快,增删慢. 线程安全, ...

  9. Eclipse下使用Fat Jar插件对源代码进行打包

    这两天需要对一个项目进行打包,并在服务器上部署成后台服务模式进行执行,原来使用eclipse进行打包很难用,配置文件容易出错,生成的jar不能正常运行.后来发现Fat Jar Eclipse Plug ...

  10. 《REWORK》启示录 招聘笔杆子——程序员为什么值得写博客

    Hire Great Writers 仿佛这是写给自己看的,不过这在其中也有着相当有趣的意义 .虽然自己算是一个能写的人,或许这算是一种不算才华的才华,写博文的意义通常不会在于去描述自己怎样,怎样.通 ...