zoukankan      html  css  js  c++  java
  • 使用JS动态创建含有1000行的表格

    function addTable(){
            createTable1(1000);
            //createTable2(1000);
            //createTable3(1000);
            //createTable4(1000);
            //createTable5(1000);
        }
        
        function createTable1(rows){
            var div = document.getElementById("div1Id");
            var child = div.childNodes;
            for(var i = 0,len = child.length;i < len;i ++){
                div.removeChild(child[i]);
            }
            var start = new Date().getTime();
            var str = "<table>";
            str += "<tr>";
            for(var i = 0;i < 5;i ++){
                str += "<th>列" + i + "</th>";
            }
            str += "</tr>";
            for(var  i = 0;i < rows;i ++){
                str += "<tr>"
                for(var j = 0;j < 5;j ++){
                    str += "<td>" + j + "</td>";
                }            
                str += "</tr>";
            }
            str += "</table>";
            //div.innerHTML = str;
            //$(div).append(str);
            $(div).html(str);
            var end = new Date().getTime();
            console.log("createTable1: " + (end - start));
        }
        
        function createTable2(rows){
            var div = document.getElementById("div2Id");
            var child = div.childNodes;
            for(var i = 0,len = child.length;i < len;i ++){
                div.removeChild(child[i]);
            }
            var start = new Date().getTime();
            var str = "<table>";
            str = str + "<tr>";
            for(var i = 0;i < 5;i ++){
                str = str + "<th>列" + i + "</th>";
            }
            str =str + "</tr>";
            for(var  i = 0;i < rows;i ++){
                str = str + "<tr>"
                for(var j = 0;j < 5;j ++){
                    str = str + "<td>" + j + "</td>";
                }            
                str = str + "</tr>";
            }
            str = str + "</table>";
            //div.innerHTML = str;
            $(div).append(str);
            var end = new Date().getTime();
            alert("createTable2: " + (end - start));
        }
        
        function createTable3(rows){
            var div = document.getElementById("div3Id");
            var child = div.childNodes;
            for(var i = 0,len = child.length;i < len;i ++){
                div.removeChild(child[i]);
            }
            var start = new Date().getTime();
            var str = [];
            str.push("<table>" , "<tr>");
            for(var i = 0;i < 5;i ++){
                str.push("<th>列" + i + "</th>");
            }
            str.push("</tr>");
            for(var  i = 0;i < rows;i ++){
                str.push("<tr>");
                for(var j = 0;j < 5;j ++){
                    str.push("<td>" + j + "</td>");
                }            
                str.push("</tr>");
            }
            str.push("</table>");
            div.innerHTML = str.join("");
            var end = new Date().getTime();
            alert("createTable3: " + (end - start));
        }
        
        function createTable4(rows){
            var div = document.getElementById("div4Id");
            var child = div.childNodes;
            for(var i = 0,len = child.length;i < len;i ++){
                div.removeChild(child[i]);
            }
            var start = new Date().getTime();
            var _table = document.createElement('table');
            var _row = document.createElement('tr');
            _table.appendChild(_row);
            for(var i = 0;i < 5;i ++){
                var _cell = document.createElement('td');
                _cell.innerHTML = 'col' + i;
                _row.appendChild(_cell);
            }
            for(var i = 0;i < rows;i ++){
                var _row = document.createElement('tr');
                _table.appendChild(_row);
                for(var j = 0;j < 5;j ++){
                    var _cell = document.createElement('td');
                    _cell.innerHTML = i + '/' + j;
                    _row.appendChild(_cell);
                }
            }
            div.appendChild(_table);
            var end = new Date().getTime();
            alert("createTable4: " + (end - start));
        }
        
        function createTable5(rows){
            var div = document.getElementById("div4Id");
            var child = div.childNodes;
            for(var i = 0,len = child.length;i < len;i ++){
                div.removeChild(child[i]);
            }
            var start = new Date().getTime();
            var _table = document.createElement('table');
            var _row = document.createElement('tr');
            var _tableFrag = document.createDocumentFragment();
            var _rowFrag = document.createDocumentFragment();
            _tableFrag.appendChild(_row);
            for(var i = 0;i < 5;i ++){
                var _cell = document.createElement('td');
                _cell.innerHTML = 'col' + i;
                _rowFrag.appendChild(_cell);
            }
            _row.appendChild(_rowFrag);
            
            for(var i = 0;i < rows;i ++){
                var _row = document.createElement('tr');
                _tableFrag.appendChild(_row);
                var _rowFrag = document.createDocumentFragment();
                for(var j = 0;j < 5;j ++){
                    var _cell = document.createElement('td');
                    _cell.innerHTML = i + '/' + j;
                    _rowFrag.appendChild(_cell);
                }
                _row.appendChild(_rowFrag);
            }
            _table.appendChild(_tableFrag);
            div.appendChild(_table);
            var end = new Date().getTime();
            alert("createTable5: " + (end - start));
        }
  • 相关阅读:
    AndroidStudio编译错误:Error: null value in entry: blameLogFolder=null
    Android中ViewPager实现滑动条及与Fragment结合的实例教程
    再说Android RecyclerView局部刷新那个坑
    【Android】图片切角,切指定的边。
    Android视频播放和横竖屏切换
    Android中3种全屏方法及3种去掉标题栏的方法
    Android 横竖屏切换
    android控件拖动,移动、解决父布局重绘时控件回到原点
    Android 自定义可拖拽View,界面渲染刷新后不会自动回到起始位置
    004 DOM01
  • 原文地址:https://www.cnblogs.com/xiaoxian1369/p/4043907.html
Copyright © 2011-2022 走看看