<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="jquery-1.7.1.min.js"></script>
    <script>
        var list=[{'id':'1','国家':'中国','首都':'北京'},{'id':'2','国家':'美国','首都':'华盛顿'},{'id':'3','国家':'日本','首都':'东京'}]
        $(function () {
            var oldColor;
            $.each(list, function (index, content) {
                var tr = $('<tr></tr>').appendTo('tbody');
                tr.hover(function () {
                    oldColor = $(this).css('background-color');
                    $(this).css({ 'background-color': 'red', 'cursor': 'pointer' });
                }, function () {
                    $(this).css('background-color', oldColor);
                });
                $.each(content, function (key, value) {
                    $('<td>' + value + '</td>').appendTo(tr);
                });
            });

            $('tbody tr:even').css('background-color', 'yellow');
        });
    </script>
</head>
<body>
    <table border="1">
        <thead>
           <tr>
            <th>Id</th>
            <th>国家</th>
            <th>首都</th>
        </tr>
        </thead>
        
        <tbody>

        </tbody>
    </table>
</body>
</html>

jquery 表格练习的更多相关文章

  1. Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引

    因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...

  2. Web jquery表格组件 JQGrid 的使用 - 11.问题研究

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  3. Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  4. Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  5. Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  6. Web jquery表格组件 JQGrid 的使用 - 7.查询数据、编辑数据、删除数据

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  7. Web jquery表格组件 JQGrid 的使用 - 8.Pager、新增数据、查询、刷新、查看数据

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  8. Web jquery表格组件 JQGrid 的使用 - 全部代码

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  9. 25款顶级的jQuery表格插件

    jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...

  10. jQuery 表格排序插件 Tablesorter 使用

    jQuery 表格排序插件 Tablesorter 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面): <script src="lib/jquery-1.8.3.m ...

随机推荐

  1. linux上电自启动应用程序具体解释

    每当我学习一个新的东西得时候都是会 遇到一些错误.可是我会很努力的去解决它,今天这个自启动应用程序花了我两个小时的时间才攻克了.所以说遇到问题的时候要去思考.分析.以下我就来谈谈linux上电自启动应 ...

  2. js进阶正则表达式6转义字符(加\转义)(.符号)(|符号)

    js进阶正则表达式6转义字符(加\转义)(.符号)(|符号) 一.总结 转义字符:{} () / $ # & * . ....... //3.特殊字符,都要加转义\ 点符号:var reg2= ...

  3. SSL/TLS协议运行机制的概述(转)

    互联网的通信安全,建立在SSL/TLS协议之上. 本文简要介绍SSL/TLS协议的运行机制.文章的重点是设计思想和运行过程,不涉及具体的实现细节.如果想了解这方面的内容,请参阅RFC文档. 一.作用 ...

  4. 2016.3.14__CSS 定位__第六天

    假设您认为这篇文章还不错.能够去H5专题介绍中查看很多其它相关文章. CSS 定位机制 CSS中一共同拥有三种基本定位机制:普通流.浮动.绝对定位. 假设不进行专门指定.全部的标签都在普通流中定位. ...

  5. 【codeforces 762A】k-th divisor

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  6. Delphi程序的自我修改

    前言:     对于Delphi在编译时对代码所做的工作,大部分使用Object Pascal之类的高级语言的程序员并不是很熟悉.如果你对汇编程序以及EXE文件格式有一点基本认识,那么源代码里包含的注 ...

  7. [Angular] @ViewChild and template #refs to get Element Ref

    We can use @ViewChild with component: @ViewChild(AuthMessageComponent) message: AuthMessageComponent ...

  8. Myeclipse - Web项目转换技巧--处理Java项目、SVN非Web项目问题

    喜欢从业的专注,七分学习的态度. 概述 对于Java调试,使用Eclipse习惯性的使用Junit调试,使用Myeclipse习惯性的将项目转成Web项目在Tomcat或Weblogic中调试,在My ...

  9. erlang局域网内节点通信——艰难四步曲

    http://blog.chinaunix.net/uid-22566367-id-382011.html 在Programming Erlang这本书中,在写到第十章中,主要实现的是不同节点之间的通 ...

  10. LR杂记 - Linux的系统监控工具vmstat详细说明

    一.前言 非常显然从名字中我们就能够知道vmstat是一个查看虚拟内存(Virtual Memory)使用状况的工具,可是如何通过vmstat来发现系统中的瓶颈呢?在回答这个问题前,还是让我们回想一下 ...