首页 > 代码库 > 使用createElement函数来动态创建table的问题
使用createElement函数来动态创建table的问题
在我们使用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>
如有什么需要改进的地方，还请高手指出，或者有更有效率的方法。
使用createElement函数来动态创建table的问题