0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

HTMLのTableタグをJavaScriptの配列に変換する

Posted at

HTMLのTableをcsvに変換するために色々調べてたんですが、その過程のJavaScriptでTable要素を配列に変換する方法をまとめておきます。

##HTML
HTMLの構造は以下の形を想定しています。

<table id="table">
      <thead></thead>
      <tbody>
        <tr>
          <td>title</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
      </tbody>
    </table>

##JavaScript
jsのコードはこんなかんじ

const table = document.getElementById("table");
const tbody = table.lastElementChild;
const rowLength = tbody.childElementCount;
let resultArray = [];

CreateCSV();

async function CreateCSV() {
  // 配列の数が膨大な場合全件取得されない場合があるので非同期処理にする
  await CreateTableArray();
  // ↓以下にcsv変換したり、配列を利用するコードを書く↓
}

// CreateItemArrayの返り値をresultArrayに追加する
function CreateTableArray() {
  for (let i = 0; i < rowLength; i++) {
    let items = tbody.children[i];
    resultArray.push(CreateItemArray(items));
  }
}

// trタグ内のtdのテキストを全件取得し、配列に変換して返す
function CreateItemArray(items) {
  let array = [];
  for (let i = 0; i < items.childElementCount; i++) {
    let item = items.children[i].textContent;
    // 空白を取り除く
    item = item.replace(/^\s+|\s+$/g, "");
    array.push(item);
  }
  return array;
}

余談ですが、csvに変換する際には以下の記事が参考になりました。
Javascriptを使ってCSVを生成してダウンロードする - 自動化無しに生活無し

他に参考になったサイトや公式のドキュメント
Element.childElementCount
Element.lastElementChild - Web APIs | MDN

参考になれば幸いです。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?