这些使用 JavaScript 创建表格的方法有何优缺点？

我发现在JS中创建表有两种方法：

1. Using insertRow and insertCell:

   var table = document.getElementById ("table");
   var row = table.insertRow (1);
   var cell = row.insertCell (0);
   cell.innerHTML = "New row";
   

2. 使用普通 DOM 操作：

   var tbl     = document.createElement("table");
   var tblBody = document.createElement("tbody");
   
   // creating all cells
   for (var j = 0; j < 2; j++) {
     // creates a table row
     var row = document.createElement("tr");
   
     for (var i = 0; i < 2; i++) {
       // Create a <td> element and a text node, make the text
       // node the contents of the <td>, and put the <td> at
       // the end of the table row
       var cell = document.createElement("td");
       var cellText = document.createTextNode("cell is row "+j+", column "+i);
       cell.appendChild(cellText);
       row.appendChild(cell);
     }
   
     // add the row to the end of the table body
     tblBody.appendChild(row);
   }
   

我看到第一个是专门为表创建的，但 MDN 上提到了第二个，所以我有点困惑该使用什么方法。各自的优点和缺点是什么？什么时候使用一种而不是另一种？

如果您可以避免使用元素，而只需将字符串放入innerHTML你会得到最好的表现。以下是创建表格的一些不同方法。

功能代码demo http://codepen.io/brigand/pen/gCmGi

我们可以创建一些函数来生成 HTML。这段代码将会非常快（但可能会更快）。我们将为所有这些示例假设该数据。

var heading = ['Name', 'Points'];

var data = [
  ["Joe", 50],
  ["Jack", 80],
  ["Doug <b>'the hammer'</b> Jones", 76]
];

然后我们可以像这样生成我们的表，

document.body.innerHTML = table(heading, data);

function wrapTag(tag, html) {
  return "<" + tag + ">" + html + "</" + tag + ">";
}


function table(head, body) {
    return wrapTag("table", thead(head)
    + tbody(body));
}

function thead(head) {
  var _th = head.map(wrapTag.bind(null, "th"));
  var _tr = wrapTag("tr", _th.join("\n"));
  return wrapTag("thead", _tr);
}

function tbody(body) {
  return body.map(tr).join("\n");
}

function tr(row) {
  var _td = row.map(wrapTag.bind(null, "td"));
  return wrapTag("tr", _td.join("\n"));
}

淘汰赛demo http://codepen.io/brigand/pen/tDsHC

在 Knockout 中，我们可以给它一个对象，并将其直接映射到我们的 HTML。随着heading and data上面定义的变量，我们像这样映射它。

ko.applyBindings({heading: heading, data: data});

我们的 HTML 使用foreach绑定，迭代数组。$data指当前数组项。

<table>
  <thead>
    <tr data-bind="foreach: heading">
      <th data-bind="text: $data"></th>
    </tr>
  </thead>
  <tbody data-bind="foreach: data">
    <tr data-bind="foreach: $data">
      <td data-bind="html: $data"></td>
    </tr>
  </tbody>
</table>

AngularJSdemo http://codepen.io/brigand/pen/LDtiz

使用上面相同的数据，我们可以创建一个 AngularJS 控制器。

function MyTableCtrl($scope) {
  $scope.heading = heading;
  $scope.data = data;
}

我们的 HTML 与 KnockoutJS 类似。一个区别是循环语法，它允许我们命名元素，例如，row in data，而不是将元素称为$data.

  <table ng-controller="MyTableCtrl">
    <thead>
      <tr>
        <th ng-repeat="head in heading">{{head}}</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="row in data">
        <td ng-repeat="content in row" ng-bind-html-unsafe="content"></td>
      </tr>
    </tbody>
  </table>

文档片段demo http://codepen.io/brigand/pen/AIkaK

^{credit to @Ian}

这比常规 DOM 操作更快，并且提供了比组合字符串更好的语法。

newTable = createTable(heading, data);
document.body.appendChild(newTable);

function createTable(h, c) {
    var frag, table, head, body;

    frag = document.createDocumentFragment();
    table = document.createElement("table");
    head = createHeader(h);
    body = createContent(c);

    table.appendChild(head);
    table.appendChild(body);

    frag.appendChild(table);

    return frag.cloneNode(true);
}

function createHeader(data) {
    var thead, rowEl, col, colEl, text, i, j;

    thead = document.createElement("thead")
    rowEl = document.createElement("tr");

    for (i = 0, j = data.length; i < j; i++) {
        col = data[i];
        colEl = document.createElement("td");
        text = document.createTextNode(col);
        colEl.appendChild(text);
        rowEl.appendChild(colEl);
    }

    thead.appendChild(rowEl);

    return thead;
}

function createContent(data) {
    var content, row, rowEl, col, colEl, text, i, j, k, l;

    content = document.createElement("tbody");

    for (i = 0, j = data.length; i < j; i++) {
        row = data[i];
        rowEl = document.createElement("tr");
        for (k = 0, l = row.length; k < l; k++) {
            col = row[k];
            colEl = document.createElement("td");
            text = document.createTextNode(col);
            colEl.appendChild(text);
            rowEl.appendChild(colEl);
        }
        content.appendChild(rowEl);
    }

    return content;
}