3

我找到了两种在 JS 中创建表的方法：

  1. 使用insertRow和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 上提到了，所以我有点困惑使用什么方法。各自的优点和缺点是什么？什么时候使用一个而不是另一个？

4

3 回答 3

4

如果您可以避免使用元素，只需将字符串放入 an 中，innerHTML您将获得最佳性能。以下是创建表的一些不同方法。

功能代码演示

我们可以创建一些函数来生成我们的 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"));
}

KnockoutJS演示

在 Knockout 中，我们可以给它一个对象，并让它直接映射到我们的 HTML。使用上面定义的heading和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>

AngularJS演示

使用上面的相同数据，我们可以创建一个 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>

文档片段演示

归功于@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;
}
于 2013-08-09T04:00:46.793 回答
1

取自这篇文章：insertRow vs. appendChild

insertRow 会更好。它由 A 级浏览器支持，它不那么冗长且 API 更简洁。

insertRow 可能被认为更可靠，因为它是 DOM 1。

appendChild 方法在所有测试过的浏览器（IE6/7、FF3、Chrome2、Opera9）上在 DOM 之外运行时始终更快（尽管略微），但在尝试修改文档中的表格时（更常见的尝试）它明显变慢.

换句话说：绝对使用 insertRow。

我个人的看法是：1方法更清晰，使用native方法

于 2013-08-09T04:36:54.010 回答
0

实际上，我在日常开发中使用Mustache ，因此您可以执行以下操作：

裸 HTML 表：

<table id="myTable"></table>

然后您可以将模板存储在非 JS<script>标记中。您可以分配一个 id 或任何东西来检索元素。

<script type="text/template" id="rowTemplate">
  {{#rows}}
  <tr>
    {{#items}}
    <td>
      {{.}}
    </td>
    {{/items}}
  </tr>
  {{/items}}
</script>

检索模板类似于：

var template = document.getElementById('rowTemplate').innerHTML;

然后你需要一个数据源。Mustache 需要一个对象来执行此操作：

var data = {
  rows : [
    {
      items : ['hello1','world1']
    },{
      items : ['hello2','world2']
    }
  ]
}

渲染：

var usableHTML = Mustache.render(template,data);

然后，您可以附加usableHTML到您的表

document.getElementById('myTable').innerHTML = usableHTML;
于 2013-08-09T04:07:52.667 回答