首页 > 代码库 > 使用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的问题