3

JS でテーブルを作成する 2 つの方法を見つけました。

  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);
}

1 つ目はテーブル用に特別に作成されたものですが、2 つ目は MDN で言及されているため、どのメソッドを使用すればよいか少し混乱しています。それぞれの長所と短所は何ですか？いつ別のものよりも使用されますか?

4

3 に答える 3

4

要素の使用を避け、文字列を に入れるだけで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;
}
于 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つの方法がより明確で、ネイティブの方法を使用しています

于 2013-08-09T04:36:54.010 に答える