<!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. 开发自己的PHP MVC框架（一）

    这个教程能够使大家掌握用mvc模式开发php应用的基本概念.此教程分为三个部分.如今这篇是第一部分. 如今市面上有非常多流行的框架供大家使用.可是我们也能够自己动手开发一个mvc框架.採用mvc模式能 ...

  2. Android addTextChangedListener（文本监听）参数解释及实现EditText字数监听

    由于最近做项目要检测EditText中输入的字数长度,从而接触到了Android中EditText的监听接口,TextWatcher.它有三个成员方法,第一个after很简单,这个方法就是在EditT ...

  3. Path类的最全面具体解释 - 自己定义View应用系列

    前言 自己定义View是Android开发人员必须了解的基础:而Path类的使用在自己定义View绘制中发挥着很关键的数据 网上有大量关于自己定义View中Path类的文章.但存在一些问题:内容不全. ...

  4. [Angular] Difference between ngAfterViewInit and ngAfterContentInit

    Content is what is passed as children. View is the template of the current component. The view is in ...

  5. Redis学习笔记4-Redis配置具体解释

    在Redis中直接启动redis-server服务时, 採用的是默认的配置文件.採用redis-server   xxx.conf 这种方式能够依照指定的配置文件来执行Redis服务. 依照本Redi ...

  6. Xor - Trie树

    题目描述 求一棵带边权的树的一条最大 Xor 路径的值.这里的"路径"不一定从根到叶子结点,中间一段路径只要满足条件也可以. 输入格式 第一行,一个整数 N ,表示一颗树有 N 个 ...

  7. spring mybatis circular reference

    摘要: Error creating bean with name 'XXX': Requested bean is currently in creation: Is there an unreso ...

  8. Fast-tracking approach for building routing topologies in fast-moving networks

    In one embodiment, a local node in a communication network determines a set of its neighbor nodes, a ...

  9. ListView与GridView优化

    前言 ListView是Android中最常用的控件,通过适配器来进行数据适配然后显示出来,而其性能是个很值得研究的话题.本文与你一起探讨Google I/O提供的优化Adapter方案,欢迎大家交流 ...

  10. eclipse中JUnit工具的使用