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>
