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 ...
随机推荐
- 谈谈JavaEE的mvc模式及典型的三层架构
首先,向读者介绍一下mvc架构,mvc是一种源于桌面程序的架构模式,它的基本思想是把程序界面和业务逻辑分开,这样便于软件的后期维护,同时也方便开发时期分工及管理,mvc有很多有点所以现在已经被广泛的应 ...
- 文件上传api——MultipartFile
MultipartFile 方法总结 byte[] getBytes() 返回文件的内容作为一个字节数组. String getContentType() 返回文件的内容类型. InputStr ...
- JS中的JSON对象 定义和取值
1.JSON(JavaScript Object Notation)一种简单的数据格式,比xml更轻巧.JSON是JavaScript原生格式,这意味着在JavaScript中处理JSON数据不需要任 ...
- [React] Render Basic SVG Components in React
React loves svg just as much as it loves html. In this lesson we cover how simple it is to make SVG ...
- 与Qt的联系方式：邮件，论坛，销售，Bug报告
If you want to learn more about upcoming things for Qt, please stay tuned for new blog posts and web ...
- Cocos2d-x V3.2+Cocos Studio1.6 实现一个简单的uibutton点击功能
好久没写博客了 这几天在学习cocos studio,这个软件可以很方便的设计游戏的一些界面,并导入到cocos2dx中,今天就用button来做个样例 首先我们打开Cocos Studio1.6,选 ...
- 开源:通用的日志分析工具(LogViewer)
工具介绍 本工具最早是制作出来查看我的 FTL(Fast Trace Log) 二进制日志文件的, 后来因为去做Java后台,经常看 SpringBoot, Tomcat 等的日志, 就简单重构了一下 ...
- 【19.00%】【vijos p1906】联合权值
描述 无向连通图 G 有 n 个点,n-1 条边.点从 1 到 n 依次编号,编号为 i 的点的权值为 WiWi, 每条边的长度均为 1.图上两点(u, v)的距离定义为 u 点到 v 点的最短距离. ...
- Android 开发新方向 Android Wear ——概述
2014 谷歌 I/O大会正式公布的Android Wear 开发理念,从而能够更系统的提供开发人员使用Android接口开发便携式可穿戴设备,以智能手表为例,通过Android提供的接口,能够方便的 ...
- 数学类网站、代码（Matlab & Python & R）
0. math & code COME ON CODE ON | A blog about programming and more programming. 1. 中文 统计学Computa ...