效果如下：
<!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>
时间： 2024-08-26 19:37:26