<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>測試</title>
<script src="jquery-1.7.1.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<table id="data">
<tr id="tem">
<td id="ID">
流水號
</td>
<td id="CarNumber">
車牌號
</td>
<td id="BusinessName">
業(yè)務(wù)類型
</td>
<td id="btn">
<input id="Button2" type="button" value="button" />
</td>
</tr>
</table>
<div id="loading">
正在加載數(shù)據(jù)...
</div>
<script type="text/jscript">
//模擬一個數(shù)據(jù)正在加載的樣子
setTimeout(function () { $("#loading").hide(); }, 1000);
//設(shè)置定時器定時調(diào)用方法，單位是毫秒
setInterval(SetData(), 1000);
//從服務(wù)器端獲取數(shù)據(jù)，并顯示到界面上,用getJSON方法實現(xiàn)
function SetData() {
$.getJSON("getData.ashx", null, function (obj) {
$("tr").eq(0).nextAll().remove(); //將除模板行的tr刪除
//將獲取到的數(shù)據(jù)動態(tài)的加載到table中
for (var i = 0; i < obj.length; i++) {
//將第四條的ID設(shè)置為紅色（此處可以用來根據(jù)內(nèi)容修改樣式
if (i == 3) {
row.find("#ID").css("color", "red");
}
//獲取模板行，復(fù)制一行
var row = $("#tem").clone();
//將新一行的按鈕添加click事件
row.find("#btn input").click({ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation);
//注意：在jquery1.4.2中，上面的方法會出錯，具體原因我也不知道，反正1.7.1這樣寫是沒有問題的
//如果上面代碼不行，你可以試一下
//row.find("#btn input").bind("click",{ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation);
//親測上面的代碼在1.4.2.min...中可以運(yùn)行，這個問題的解決浪費(fèi)了很長事件，都怪用了比較老的框架
row.find("#ID").text(obj[i].CKRID); //流水號
row.find("#CarNumber").text(obj[i].CHRCARNUMBER); //汽車車牌號
row.find("#BusinessName").text(obj[i].BCRNAME); //所辦理的業(yè)務(wù)名稱
//將新行添加到表格中
row.appendTo("#data");
}
});
}
//獲取傳過來的參數(shù)并顯示
function operation(event) {
alert(event.data.name);
alert(event.data.back);
}
//從服務(wù)器端獲取數(shù)據(jù)，并顯示到界面上,用ajax方法實現(xiàn)
function SetDataByAjax() {
$.ajax({
type: "get", //設(shè)置調(diào)用類型
dataType: "json", //設(shè)置數(shù)據(jù)類型
url: "getData.ashx", //url
complete: function () { $("#loading").hide() },
success: function (obj) {
$("tr").eq(0).nextAll().remove(); //將除模板行的tr刪除
//將獲取到的數(shù)據(jù)動態(tài)的加載到table中
for (var i = 0; i < obj.length; i++) {
//將第四條的ID設(shè)置為紅色（此處可以用來根據(jù)內(nèi)容修改樣式
if (i == 3) {
row.find("#ID").css("color", "red");
}
//獲取模板行，復(fù)制一行
var row = $("#tem").clone();
//將新一行的按鈕添加click事件
row.find("#btn input").click({ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation);
//注意：在jquery1.4.2中，上面的方法會出錯，具體原因我也不知道，反正1.7.1這樣寫是沒有問題的
//如果上面代碼不行，你可以試一下
//row.find("#btn input").bind("click",{ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation);
//親測上面的代碼在1.4.2中可以運(yùn)行，這個問題的解決浪費(fèi)了很長事件，都怪用了比較老的框架
row.find("#ID").text(obj[i].CKRID); //流水號
row.find("#CarNumber").text(obj[i].CHRCARNUMBER); //汽車車牌號
row.find("#BusinessName").text(obj[i].BCRNAME); //所辦理的業(yè)務(wù)名稱
//將新行添加到表格中
row.appendTo("#data");
}
}
});
}
</script>
</form>
</body>
</html>
