javascript - ID でテーブルを取得し、行を 1 つずつ繰り返します

Question

使いたい

var merch = document.getElementById('merch');

動的に入力される Web ページのテーブルを取得します。次に、一度に 1 行ずつテーブルを反復処理し、

<td> 

各要素を文字列として配列に格納します。各行には独自の配列があります。

誰かがこれを達成する方法についての手がかりを教えてもらえますか? 検索で見つけられなかった簡単な方法があると確信しています。

よろしくお願いいたします。

Answer 1

動作デモ。

var merch = document.getElementById('merch');

// this will give you a HTMLCollection
var rows = merch.rows;

// this will change the HTMLCollection to an Array
var rows = [].slice.call(merch.rows);   

// if you want the elements in the array be string.
// map the array, get the innerHTML propery.
var rows = [].slice.call(merch.rows).map(function(el) {
    return el.innerHTML;
});

地図

Answer 2

これには jQuery を使用すると、はるかに簡単になります。次に、このようなことができます。

HTML テーブル

<table id="iterateOverThisTable">
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
</table>

JS ファイル (jQuery が既に含まれている)

$(function() {
  var rows = [];

  $("#tableToIterateOver tr").each(function() {
    var = cells = [];

    $(this).find('td').each(function() {
      cells.push($(this).text());
    });

    rows.push(cells);
  });
})