效果如下：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
  2.  
  3. transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6.     <title></title>
  7.     <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
  8.     <script type="text/javascript">
  9.         $(function () {
  10.             $("#initData").one("click", function () {
  11.                 //加载数据
  12.                 initData();
  13.             });
  14.             $("#initCssAndEvent").one("click", function () {
  15.                 //设置样式与事件
  16.                 bindCssAndEvent();
  17.             });
  18.         });
  19.  
  20.         //加载数据
  21.         function initData() {
  22.             //车次数据
  23.             var data = [{ "xuhao": "1", "checi": "1171(哈尔滨->太原)", "fazhan": "北京", "daozhan": "太原", 
  24.  
  25. "fashi": "02:29", "daoshi": "13:46", "lishi": "11:17", "shangwuzuo": "--", "tedengzuo": "--", "yidengzuo": "--", 
  26.  
  27. "erdengzuo": "--", "yingzuo": "100", "dengji": "普快" },
  28.  
  29.                     { "xuhao": "2", "checi": "Z55(北京西->兰州)", "fazhan": "北京西", "daozhan": "太原", "fashi": 
  30.  
  31. "14:30", "daoshi": "19:14", "lishi": "04:44", "shangwuzuo": "--", "tedengzuo": "--", "yidengzuo": "--", 
  32.  
  33. "erdengzuo": "--", "yingzuo": "14", "dengji": "直特" },
  34.  
  35.                     { "xuhao": "3", "checi": "D2011(北京西->太原)", "fazhan": "北京西", "daozhan": "太原", 
  36.  
  37. "fashi": "15:31", "daoshi": "19:22", "lishi": "03:51", "shangwuzuo": "--", "tedengzuo": "--", "yidengzuo": "0", 
  38.  
  39. "erdengzuo": "0", "yingzuo": "--", "dengji": "动车" },
  40.  
  41.                     { "xuhao": "4", "checi": "T41(北京西->西安)", "fazhan": "北京西", "daozhan": "太原", "fashi": 
  42.  
  43. "15:51", "daoshi": "21:31", "lishi": "05:40", "shangwuzuo": "--", "tedengzuo": "--", "yidengzuo": "--", 
  44.  
  45. "erdengzuo": "--", "yingzuo": "40", "dengji": "特快" },
  46.  
  47.                     { "xuhao": "5", "checi": "D191(沈阳北->太原)", "fazhan": "北京", "daozhan": "太原", "fashi": 
  48.  
  49. "17:05", "daoshi": "21:00", "lishi": "03:55", "shangwuzuo": "--", "tedengzuo": "--", "yidengzuo": "42", 
  50.  
  51. "erdengzuo": "59", "yingzuo": "--", "dengji": "动车" },
  52.  
  53.                     { "xuhao": "6", "checi": "T27(北京西->拉萨)", "fazhan": "北京西", "daozhan": "太原", "fashi": 
  54.  
  55. "20:08", "daoshi": "00:53", "lishi": "04:45", "shangwuzuo": "--", "tedengzuo": "--", "yidengzuo": "--", 
  56.  
  57. "erdengzuo": "--", "yingzuo": "9", "dengji": "动车"}];
  58.  
  59.             for (var i = 0; i < data.length; i++) {
  60.                 var tr = "<tr>";
  61.                 tr += "<td>" + data[i].xuhao + "</td>";
  62.                 tr += "<td>" + data[i].checi + "</td>";
  63.                 tr += "<td>" + data[i].fazhan + "</td>";
  64.                 tr += "<td>" + data[i].daozhan + "</td>";
  65.                 tr += "<td>" + data[i].fashi + "</td>";
  66.                 tr += "<td>" + data[i].daoshi + "</td>";
  67.                 tr += "<td>" + data[i].lishi + "</td>";
  68.                 tr += "<td>" + data[i].shangwuzuo + "</td>";
  69.                 tr += "<td>" + data[i].tedengzuo + "</td>";
  70.                 tr += "<td>" + data[i].yidengzuo + "</td>";
  71.                 tr += "<td>" + data[i].erdengzuo + "</td>";
  72.                 tr += "<td>" + data[i].yingzuo + "</td>";
  73.                 tr += "<td>" + data[i].dengji + "</td>";
  74.                 tr += "</tr>";
  75.                 $("#dataTab").append(tr);
  76.             }
  77.         }
  78.  
  79.         //设置样式与事件
  80.         function bindCssAndEvent() {
  81.             //a
  82.             $("#dataTab thead").css({ "background": "url(images/bg.png) repeat-x", "color": "#055A78" });
  83.             //b
  84.             $("#dataTab").css("text-align", "center");
  85.             //c
  86.             $("td:eq(1)", "#dataTab tr:gt(1)").wrapInner("<a href='#'></a>")
  87.             .children().css({ "color": "black", "text-decoration": "none" })
  88.             .mouseover(function () {
  89.                 $(this).css("color", "red");
  90.             })
  91.             .mouseout(function () {
  92.                 $(this).css("color", "black");
  93.             });
  94.  
  95. //            $('#dataTab tr:gt(1) td:nth-child(2)').wrap('<a href="#" style="color:black;text-
  96.  
  97. decoration:none;"></a>').parent('a').hover(function () {
  98. //                $(this).css('color', 'red');
  99. //            }, function () { $(this).css('color', 'black'); });
  100.  
  101.             //d
  102.             $("#dataTab tr:gt(1):odd").css("background-color", "#E5F2F8");
  103.             //e
  104.             $("#dataTab tr:gt(1)").css("cursor", "default")
  105.             .click(function () {
  106.                 $("#dataTab tr:gt(1):odd").css("background-color", "#E5F2F8");
  107.                 $("#dataTab tr:gt(1):even").css("background-color", "#fff");
  108.                 $(this).css("background-color", "#9AC2E5");
  109.             });
  110.  
  111.         }
  112.  
  113.     </script>
  114. </head>
  115. <body>
  116. <input id="initData" type="button" value="加载数据" /><input id="initCssAndEvent" type="button" value="设置样式与
  117.  
  118. 事件" />
  119. <table id="dataTab" border="1" cellpadding="0" cellspacing="0"  >
  120.     <thead>
  121.         <tr>
  122.             <th rowspan="2">序号</th>
  123.             <th rowspan="2">车次</th>
  124.             <th colspan="2">查询区间</th>
  125.             <th colspan="3">区间运行时刻</th>
  126.             <th colspan="5">余票信息</th>
  127.             <th>列车信息</th>
  128.         </tr>
  129.         <tr>
  130.             <th>发站</th>
  131.             <th>到站</th>
  132.             <th>发时</th>
  133.             <th>到时</th>
  134.             <th>历时</th>
  135.             <th>商务座</th>
  136.             <th>特等座</th>
  137.             <th>一等座</th>
  138.             <th>二等座</th>
  139.             <th>硬座</th>
  140.             <th>等级</th>
  141.         </tr>
  142.     </thead>
  143.  
  144. </table>
  145.  
  146. </body>
  147. </html>

jquery 综合使用例子的更多相关文章

  1. jquery:validate的例子

    该文档转载自 http://ideabean.javaeye.com/blog/363927 官方网站 http://bassistance.de/jquery-plugins/jquery-plug ...

  2. Dojo与jQuery综合比较分析

    最近一直都在参与项目,无法抽空写些或者看些东西,周末抽了点时间看了下关于Dojo和Jquery的东西,在CSDN上看到一篇两个框架进行对比的文章,感觉写的不错,就拿了过来,没有别的意思,一来想保留下来 ...

  3. JQuery经典小例子——可编辑的表格

    可编辑的表格: 屏幕剪辑的捕获时间: 2015/8/14 9:16 HTML代码为: <!DOCTYPE html> <htmlxmlns="http://www.w3.o ...

  4. jquery综合

    1.选择器性能比较: http://www.jcodecraeer.com/a/javascript/2012/0418/112.html http://developer.51cto.com/art ...

  5. jQuery与js例子

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jquery综合练习--模态对话框传值,删除,新增表格行

    效果示例: 个人的练习代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  7. 一个简单的jQuery回调函数例子

    jQuery回调函数简单使用 比如说,我们想要点击某个按钮后触发事件, 先把一些指定内容给隐藏掉, 然后跳出相关信息的对话框. 如果使用普通的方法, 不用回调函数的话, 会有怎么样的效果呢? 效果是先 ...

  8. jQuery选择器简单例子

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jQuery_5.aspx. ...

  9. jquery ajax POST 例子详解

    function test(){ $.ajax({ //提交数据的类型 POST GET type:"POST", //提交的网址 url:"testLogin.aspx ...

随机推荐

  1. Cisco cmd 命令(二）

    1.配置路由器静态路由选择表 ip route [destination_network] [mask] [next_hop_address or exitinterface] [administra ...

  2. C#实现在线更新系统

    先来看一下程序完成后长什么样. 这个是程序的组成部分. 主要功能是在InitializationUpdate这个类中完成的,From1主要起到调用的作用,所以重心还是在InitializationUp ...

  3. 值栈和OGNL 之 7.1 值栈

    7.1  值栈 7.1.1  值栈是什么 简单的说:值栈是对应每一个请求对象的轻量级的内存数据中心. Struts2中一个很激动人心的特性就是引入了值栈,在这里统一管理着数据,供Action.Resu ...

  4. Oracle:ORA-01791: 不是 SELECTed 表达式

     项目中写hql语句 出现 ORA-01791: 不是 SELECTed 表达式问题. 语句如下: select distinct(name) where student order by numbe ...

  5. commons-logging 和 log4j 之间的关系

    我们在做项目时,日志的记录是必不可少的一项任务,而我们通常是使用 apache 的 log4j 日志管理工具.然而,在项目中,我们经常会看到两个 jar 包:commons-logging.jar 和 ...

  6. EF调用存储过程实例

    创建实体: public class User { public string UserID { get; set; } public string UserName { get; set; } pu ...

  7. scrollbarsstyle

    android:scrollbarStyle属性及滚动条和分割线覆盖问题 本文主要介绍android view的android:scrollbarStyle属性意义android:scrollbarS ...

  8. USB Mass Storage学习笔记－STM32＋FLASH实现U盘

    一.内容概述  采用STM32内部自带USB控制器外加大页NAND FLASH K9F1G08U0A实现一个128M的U盘. 1.STM32的USB控制器 STM32F103的MCU自带USB从控制器 ...

  9. 8051、ARM和DSP指令周期的测试与分析

    在实时嵌入式控制系统中,指令周期对系统的性能有至关重要的影响.介绍几种最常用的微控制器的工作机制,采用一段循环语句对这几种微控制器的指令周期进行测试,并进行分析比较.分析结论对系统控制器的选择有一定的 ...

  10. 正则取页面图片URL和TABLE BackGround

    /// <summary> /// 根据html文本返回url地址集合 /// </summary> /// <param name="sHtmlText&qu ...