• 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>
  • 相关阅读:
    简易温控器的开发
    信号处理电路1:差动转单端输出电路计算于分析
    电容触摸屏资料适合7寸30PINS
    TI Motor Control
    AD规则实例1元件keepout层与覆铜间距
    Python基础语法
    Python基本运算符
    Python 字符串
    javascript>getElementsByClass
    thrift多平台安装
  • 原文地址:https://www.cnblogs.com/suanshun/p/6074645.html
Copyright © 2020-2023  润新知