jquery 综合使用例子
效果如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#initData").one("click", function () {
//加载数据
initData();
});
$("#initCssAndEvent").one("click", function () {
//设置样式与事件
bindCssAndEvent();
});
}); //加载数据
function initData() {
//车次数据
var data = [{ "xuhao": "1", "checi": "1171(哈尔滨->太原)", "fazhan": "北京", "daozhan": "太原", "fashi": "02:29", "daoshi": "13:46", "lishi": "11:17", "shangwuzuo": "--", "tedengzuo": "--", "yidengzuo": "--", "erdengzuo": "--", "yingzuo": "100", "dengji": "普快" }, { "xuhao": "2", "checi": "Z55(北京西->兰州)", "fazhan": "北京西", "daozhan": "太原", "fashi": "14:30", "daoshi": "19:14", "lishi": "04:44", "shangwuzuo": "--", "tedengzuo": "--", "yidengzuo": "--", "erdengzuo": "--", "yingzuo": "14", "dengji": "直特" }, { "xuhao": "3", "checi": "D2011(北京西->太原)", "fazhan": "北京西", "daozhan": "太原", "fashi": "15:31", "daoshi": "19:22", "lishi": "03:51", "shangwuzuo": "--", "tedengzuo": "--", "yidengzuo": "0", "erdengzuo": "0", "yingzuo": "--", "dengji": "动车" }, { "xuhao": "4", "checi": "T41(北京西->西安)", "fazhan": "北京西", "daozhan": "太原", "fashi": "15:51", "daoshi": "21:31", "lishi": "05:40", "shangwuzuo": "--", "tedengzuo": "--", "yidengzuo": "--", "erdengzuo": "--", "yingzuo": "40", "dengji": "特快" }, { "xuhao": "5", "checi": "D191(沈阳北->太原)", "fazhan": "北京", "daozhan": "太原", "fashi": "17:05", "daoshi": "21:00", "lishi": "03:55", "shangwuzuo": "--", "tedengzuo": "--", "yidengzuo": "42", "erdengzuo": "59", "yingzuo": "--", "dengji": "动车" }, { "xuhao": "6", "checi": "T27(北京西->拉萨)", "fazhan": "北京西", "daozhan": "太原", "fashi": "20:08", "daoshi": "00:53", "lishi": "04:45", "shangwuzuo": "--", "tedengzuo": "--", "yidengzuo": "--", "erdengzuo": "--", "yingzuo": "9", "dengji": "动车"}]; for (var i = 0; i < data.length; i++) {
var tr = "<tr>";
tr += "<td>" + data[i].xuhao + "</td>";
tr += "<td>" + data[i].checi + "</td>";
tr += "<td>" + data[i].fazhan + "</td>";
tr += "<td>" + data[i].daozhan + "</td>";
tr += "<td>" + data[i].fashi + "</td>";
tr += "<td>" + data[i].daoshi + "</td>";
tr += "<td>" + data[i].lishi + "</td>";
tr += "<td>" + data[i].shangwuzuo + "</td>";
tr += "<td>" + data[i].tedengzuo + "</td>";
tr += "<td>" + data[i].yidengzuo + "</td>";
tr += "<td>" + data[i].erdengzuo + "</td>";
tr += "<td>" + data[i].yingzuo + "</td>";
tr += "<td>" + data[i].dengji + "</td>";
tr += "</tr>";
$("#dataTab").append(tr);
}
} //设置样式与事件
function bindCssAndEvent() {
//a
$("#dataTab thead").css({ "background": "url(images/bg.png) repeat-x", "color": "#055A78" });
//b
$("#dataTab").css("text-align", "center");
//c
$("td:eq(1)", "#dataTab tr:gt(1)").wrapInner("<a href='#'></a>")
.children().css({ "color": "black", "text-decoration": "none" })
.mouseover(function () {
$(this).css("color", "red");
})
.mouseout(function () {
$(this).css("color", "black");
}); // $('#dataTab tr:gt(1) td:nth-child(2)').wrap('<a href="#" style="color:black;text- decoration:none;"></a>').parent('a').hover(function () {
// $(this).css('color', 'red');
// }, function () { $(this).css('color', 'black'); }); //d
$("#dataTab tr:gt(1):odd").css("background-color", "#E5F2F8");
//e
$("#dataTab tr:gt(1)").css("cursor", "default")
.click(function () {
$("#dataTab tr:gt(1):odd").css("background-color", "#E5F2F8");
$("#dataTab tr:gt(1):even").css("background-color", "#fff");
$(this).css("background-color", "#9AC2E5");
}); } </script>
</head>
<body>
<input id="initData" type="button" value="加载数据" /><input id="initCssAndEvent" type="button" value="设置样式与 事件" />
<table id="dataTab" border="1" cellpadding="0" cellspacing="0" >
<thead>
<tr>
<th rowspan="2">序号</th>
<th rowspan="2">车次</th>
<th colspan="2">查询区间</th>
<th colspan="3">区间运行时刻</th>
<th colspan="5">余票信息</th>
<th>列车信息</th>
</tr>
<tr>
<th>发站</th>
<th>到站</th>
<th>发时</th>
<th>到时</th>
<th>历时</th>
<th>商务座</th>
<th>特等座</th>
<th>一等座</th>
<th>二等座</th>
<th>硬座</th>
<th>等级</th>
</tr>
</thead> </table> </body>
</html>
jquery 综合使用例子的更多相关文章
- jquery:validate的例子
该文档转载自 http://ideabean.javaeye.com/blog/363927 官方网站 http://bassistance.de/jquery-plugins/jquery-plug ...
- Dojo与jQuery综合比较分析
最近一直都在参与项目,无法抽空写些或者看些东西,周末抽了点时间看了下关于Dojo和Jquery的东西,在CSDN上看到一篇两个框架进行对比的文章,感觉写的不错,就拿了过来,没有别的意思,一来想保留下来 ...
- JQuery经典小例子——可编辑的表格
可编辑的表格: 屏幕剪辑的捕获时间: 2015/8/14 9:16 HTML代码为: <!DOCTYPE html> <htmlxmlns="http://www.w3.o ...
- jquery综合
1.选择器性能比较: http://www.jcodecraeer.com/a/javascript/2012/0418/112.html http://developer.51cto.com/art ...
- jQuery与js例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery综合练习--模态对话框传值,删除,新增表格行
效果示例: 个人的练习代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- 一个简单的jQuery回调函数例子
jQuery回调函数简单使用 比如说,我们想要点击某个按钮后触发事件, 先把一些指定内容给隐藏掉, 然后跳出相关信息的对话框. 如果使用普通的方法, 不用回调函数的话, 会有怎么样的效果呢? 效果是先 ...
- jQuery选择器简单例子
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jQuery_5.aspx. ...
- jquery ajax POST 例子详解
function test(){ $.ajax({ //提交数据的类型 POST GET type:"POST", //提交的网址 url:"testLogin.aspx ...
随机推荐
- 如何禁用Visual Studio 2013的Browser Link功能
VS2013新增的Browser Link功能虽然“强大”,但我并不需要. 但默认是开启的,会在页面中自动添加如下的代码,真是烦人! <!-- Visual Studio Browser Lin ...
- C#索引器:在集合或数组中取出某一个元素 举例 _【转】
Garmmar: [访问修饰符] 数据类型 this[参数列表] { get { 获取索引器的内容 } set { 设置索引器的内容 } } Eg: <span style="font ...
- Django 实战 之 搭项目(正在更新)
系统:win10 python版本:python 3.5 工具: pyCharm 3.4 professional 源码来源:https://github.com/ouzhigang/django-o ...
- c中关于#与##的简易使用
#运算符用于在预编译时,将宏参数转换为字符串 eg. #include <stdio.h>#define CONVERT(f)(#f) void helloworld(){ printf( ...
- (原)caffe中通过图像生成lmdb格式的数据
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5909121.html 参考网址: http://www.cnblogs.com/wangxiaocvp ...
- Js 日期处理
Js获取当前日期时间 var myDate = new Date(); myDate.getFullYear(); //获取完整的年份(4位,1970-????) 2014myDate.get ...
- [转]MySQL 5.6 全局事务 ID(GTID)实现原理(三)
原文连接:http://qing.blog.sina.com.cn/1757661907/68c3cad333002s5l.html 原文作者:淘长源 转载注明以上信息 这是 MySQL 5.6 全局 ...
- PyQt4.11.3(python3.4+QT4)ui文件生成py文件
最近开始接触学习Python,所以想用QT弄个窗体程序出来玩玩,环境是Python3.4.2.PyQt4.11.3-Py3.4.Win7.用PyQt自带的Designer设计出一个窗体ui文件后,需要 ...
- 工作中小知识点汇总(c#)
1.OOP 实体与数据库字段转换(注意 此时实体字段必须和数据库中查询的字段列名相同) list = ModelExtend.GetByDataTablePart<EZRate>(ds.T ...
- MERGE_SORT归并排序C++实现
大家好,我是小鸭酱,博客地址为:http://www.cnblogs.com/xiaoyajiang 以下实现归并排序,第一部分含有哨兵(算法来自<算法导论>),第二部分不含哨兵 第一部分 ...