首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用JavaScript创建动态大表

使用JavaScript创建动态大表
EN

Stack Overflow用户
提问于 2014-11-22 11:30:36
回答 1查看 1.8K关注 0票数 0

我正在尝试使用JavaScript动态创建一个表。

这里是我正在使用的代码(或者这里是http://liveweave.com/mqG5iT):

代码语言:javascript
运行
复制
 function Process(){
         CreatTable(['First Name', 'Last Name', 'Email']);

     }
    function CreatTable(data) {
    var checkbox;
    var table;
    var thead;
    var tr;
    var th;
    var tbody;

    tablearea = document.getElementById('ShowDataID');
    table = document.createElement('table');
    table.id = "ContactsTable";
    thead = document.createElement('thead');
    tr = document.createElement('tr');
    tbody = document.createElement('tbody');

    //create columns input checkbox column
    checkbox = CreateHTMLElement("chkBoxAllEmails", "chkBoxAllEmails", "SelectAllEmails()", "checkbox", "false");
    th = document.createElement('th');
    th.appendChild(checkbox);
    tr.appendChild(th);
    thead.appendChild(tr);

    //create columns FirstName,LastName,Emails
    for (var i = 0; i < data.length; i++) {
        var headerTxt = document.createTextNode(data[i]);
        th = document.createElement('th');
        th.appendChild(headerTxt);
        tr.appendChild(th);
        thead.appendChild(tr);
    }
    table.appendChild(thead);

    //create rows and addind to table
    for (var i = 0; i < 2000; i++) {
        tr = document.createElement('tr');
        checkbox = CreateHTMLElement("11", "11", "11", "checkbox", "11");
        tr.appendChild(document.createElement('td'));
        tr.appendChild(document.createElement('td'));
        tr.appendChild(document.createElement('td'));
        tr.appendChild(document.createElement('td'));

        tr.cells[0].appendChild(checkbox);               tr.cells[1].appendChild(document.createTextNode('John'+i.toString()));
        tr.cells[2].appendChild(document.createTextNode('McDowell'));
        tr.cells[3].appendChild(document.createTextNode('ddd@gmail.com'));

        tbody.appendChild(tr);
        table.appendChild(tbody);
    }
   document.getElementById("TablePagingArea").appendChild(table);
    //return table;
}

function CreateHTMLElement(id, name, onclick, type, value) {
    var HTMLElement = document.createElement('input');
    HTMLElement.id = id;
    HTMLElement.name = name;
    HTMLElement.onclick = onclick;
    HTMLElement.type = type;
    HTMLElement.value = value;
    return HTMLElement;
}

对于1000到3000行的小数据集,它工作得比较好,但是,有些数据集包含5000行以上的数据,这会导致Firefox崩溃、关闭或失去响应。

我的问题是:是否有更好的方法来完成我想要做的事情?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-11-22 11:51:36

  1. 创建一组元素的最有效方法是从这个字符串创建一个字符串并创建一个元素。
  2. 创建元素字符串的最有效方法是从数组中连接。

因此,您应该将代码重构为

  1. 创建像a[i] = "<tr><intput type='checkbox'></tr>";这样的元素数组
  2. 加入一个数组以获得一个字符串var s = a.join()
  3. 创建像var div = document.createElement('div'); div.innerHTML = s;这样的DOM元素
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/27076886

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档