在我們使用ajax時,最重要的就是success函數中對於頁面的動態生成,現在的情景就是使用ajax動態生成table或者其他列表格式來進行查詢的輸出。我去網上查過一些資料,關於動態生成table的例子,大多是通過拼寫html文本來實現,這個缺點就是如果數據量很大,js的性能不高。我參考了一些資料后,決定使用動態生成html元素來進行顯示。核心函數就是document.createElement(string tagName)來生成table,thead,tbody,tr,th,td等元素。代碼如下:
<html>
<head>
<title>Create Table</title>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var con = document.getElementById("container");
var table = document.createElement("table");
var thead = table.createTHead();
var tbody = table.createTBody();
var tr = document.createElement("tr");
for (var i = 0; i < 5; i++) {
th = document.createElement("th");
th.innerHTML = "title" + i;
tr.appendChild(th);
}
thead.appendChild(tr);
for (var i = 0; i < 10; i++) {
var tr = document.createElement("tr");
for (var j = 0; j < 5; j++) {
td = document.createElement("td");
td.innerHTML = i + "," + j;
tr.appendChild(td);
}
tbody.appendChild(tr);
}
con.appendChild(table);
</script>
</body>
</html>
如有什么需要改進的地方,還請高手指出,或者有更有效率的方法。