jquery 表格练习
<!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 表格练习的更多相关文章
- Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引
因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...
- Web jquery表格组件 JQGrid 的使用 - 11.问题研究
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- Web jquery表格组件 JQGrid 的使用 - 7.查询数据、编辑数据、删除数据
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- Web jquery表格组件 JQGrid 的使用 - 8.Pager、新增数据、查询、刷新、查看数据
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- Web jquery表格组件 JQGrid 的使用 - 全部代码
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- 25款顶级的jQuery表格插件
jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...
- jQuery 表格排序插件 Tablesorter 使用
jQuery 表格排序插件 Tablesorter 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面): <script src="lib/jquery-1.8.3.m ...
随机推荐
- linux上电自启动应用程序具体解释
每当我学习一个新的东西得时候都是会 遇到一些错误.可是我会很努力的去解决它,今天这个自启动应用程序花了我两个小时的时间才攻克了.所以说遇到问题的时候要去思考.分析.以下我就来谈谈linux上电自启动应 ...
- js进阶正则表达式6转义字符(加\转义)(.符号)(|符号)
js进阶正则表达式6转义字符(加\转义)(.符号)(|符号) 一.总结 转义字符:{} () / $ # & * . ....... //3.特殊字符,都要加转义\ 点符号:var reg2= ...
- SSL/TLS协议运行机制的概述(转)
互联网的通信安全,建立在SSL/TLS协议之上. 本文简要介绍SSL/TLS协议的运行机制.文章的重点是设计思想和运行过程,不涉及具体的实现细节.如果想了解这方面的内容,请参阅RFC文档. 一.作用 ...
- 2016.3.14__CSS 定位__第六天
假设您认为这篇文章还不错.能够去H5专题介绍中查看很多其它相关文章. CSS 定位机制 CSS中一共同拥有三种基本定位机制:普通流.浮动.绝对定位. 假设不进行专门指定.全部的标签都在普通流中定位. ...
- 【codeforces 762A】k-th divisor
time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...
- Delphi程序的自我修改
前言: 对于Delphi在编译时对代码所做的工作,大部分使用Object Pascal之类的高级语言的程序员并不是很熟悉.如果你对汇编程序以及EXE文件格式有一点基本认识,那么源代码里包含的注 ...
- [Angular] @ViewChild and template #refs to get Element Ref
We can use @ViewChild with component: @ViewChild(AuthMessageComponent) message: AuthMessageComponent ...
- Myeclipse - Web项目转换技巧--处理Java项目、SVN非Web项目问题
喜欢从业的专注,七分学习的态度. 概述 对于Java调试,使用Eclipse习惯性的使用Junit调试,使用Myeclipse习惯性的将项目转成Web项目在Tomcat或Weblogic中调试,在My ...
- erlang局域网内节点通信——艰难四步曲
http://blog.chinaunix.net/uid-22566367-id-382011.html 在Programming Erlang这本书中,在写到第十章中,主要实现的是不同节点之间的通 ...
- LR杂记 - Linux的系统监控工具vmstat详细说明
一.前言 非常显然从名字中我们就能够知道vmstat是一个查看虚拟内存(Virtual Memory)使用状况的工具,可是如何通过vmstat来发现系统中的瓶颈呢?在回答这个问题前,还是让我们回想一下 ...