使用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>

如有什么需要改進的地方,還請高手指出,或者有更有效率的方法。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM