要素の使用を避け、文字列を に入れるだけで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 data1 つの違いは、要素を として参照する代わりに、要素に名前を付けることができるループ構文$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;
}