<!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. windows 空闲超时 非管理员如何破解

    windows 空闲超时 非管理员如何破解

  2. ASCII，Unicode和UTF-8终于找到一个能完全搞清楚的文章了

    前言 平时喜欢写东西,看博客,一直对编码有些懵,今天下午也不知道看到了什么,突然想了解下,就找到了这个文章,看完真的豁然开朗,这个必须留下来做纪念. 点击打开链接 1.ASCII 我们知道,计算机内部 ...

  3. #308 (div.2) B. Vanya and Books

    1.题目描写叙述:点击打开链接 2.解题思路:本题要求统计数位的个数,简单的试验一下发现有例如以下规律:一个n位数的个数有9*(10^n)个.因此全部n位数的数位是n*9*(10^n)个.因此能够利用 ...

  4. bash keys

    stty-a CTRL-S and CTRL-Q are called flow-control characters. Bash readline 使用技巧_Linux编程_操作系统_希赛网 htt ...

  5. php标准库中QplQueue队列如何使用？

    php标准库中QplQueue队列如何使用? 一.总结 1.new对象,然后通过enqueue方法和dequeue方法使用. 二.php标准库中QplQueue队列如何使用? 队列这种数据结构更简单, ...

  6. vs 错误提示及解决方案

    错误: 应输入";" 错误原因,宏展开出现错误:

  7. [Postgres] Group and Aggregate Data in Postgres

    How can we see a histogram of movies on IMDB with a particular rating? Or how much movies grossed at ...

  8. 转载：APP a打开b软件的附件

    Importing & Exporting Documents in iOS Posted by weimenglee - 09 Aug 2011 https://mobiforge.com/ ...

  9. 【codeforces 546E】Soldier and Traveling

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  10. iOS 9和xcode7设置

    升级了Xcode7各种问题来了,折腾两天 一.Xcode7  http适配设置 1.大部分社交平台接口不支持https协议. 2.大部分社交平台SDK不支持bitcode. 3.添加Scheme白名单 ...