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
参考になれば幸いです。