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 ...

随机推荐

LANMP 一键下载
下载安装 wget http://dl.wdlinux.cn:5180/lanmp_v2.5.tar.gz tar zxvf lanmp_v2.5.tar.gz sh install.sh 4个可选安 ...
C#使用seleium实现一个自动登录器
1.http://docs.seleniumhq.org/ 下载seleium包 2.新建一个C#项目,比如控制台,引用seleium包中的dll using System; using System ...
mysql中函数DISTINCT，group by，CONCAT及GROUP_CONCAT的使用
一:DISTINCT 在使用mysql时,有时需要查询出某个字段不重复的记录,虽然mysql提供有distinct这个关键字来过滤掉多余的重复记录只保留一条,但往往只用它来返回不重复记录的条数,而不是 ...
Servlet开发(二)
一.ServletConfig讲解 1.1.配置Servlet初始化参数在Servlet的配置文件web.xml中,可以使用一个或多个<init-param>标签为servlet配置一些 ...
adb shell am pm
adb shell am instrument [options] <COMPONENT> 作用:启动对instrument实例的监视. 参数[options]: -e <key&g ...
PHP内置函数getimagesize()的漏洞
今天程序想压缩一些图片,想获取图片的宽高,在网上查了一下哪些函数可以使用,然后看到getimagesize()这个函数.但是当同事看到这个函数,提醒我说这个函数,运营同事禁止使用.心里就很奇怪,就在网 ...
Pet（hdu 4707 BFS）
Pet Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
（转）使用scp命令在linux操作系统之间传递文件
一.关于scp scp是英文secure copy (remote file copy program)的简称,主要用于在两台主机之间通过网络拷贝文件.scp使用ssh协议进行数据传递,其认证方式和安 ...
keil C51 指针总结
变量就是一种在程序执行过程中其值能不断变化的量.要在程序中使用变量必须先用标识符作为变量名,并指出所用的数据类型和存储模式,这样编译系统才能为变量分配相应的存储空间.定义一个变量的格式如下: [存储种 ...
创业不要在IT业内创（市场太小，而且都喜欢自己折腾、没有花钱的习惯）
精神是好的.但是,我看了你的产品和网站:你选的创业方向基本是死路一条,我劝你该放弃就放弃.我判断你的思路还局限在IT行业内,创业不要在IT业内创,要走出去,睁开眼看看别人的世界,自己体会.我不是打击你 ...

jquery 综合使用例子

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

随机推荐

热门专题