#はじめに
通常のtext要素だけで構成されるtableからテキストを取得する方法の解説記事は多かったが、
inputを含んだtableから取得している記事はあまり見られなかったので、メモついでに。
まあ、やっていることはほぼ変わらないのですが...
#やりたいこと
こんな感じでtdタグの中にinputが入っていて、ユーザーが編集できたりするテーブルですね。
このテーブルからinputの部分も含めて、body部分のテキストを全て抽出します。
table.html
<!DOCTYPE html>
<html>
<head></head>
<body>
<table id="table" border="1" cellpadding="10">
<tr>
<th>名前</th>
<th>年齢</th>
<th>性別</th>
<th>出身地</th>
</tr>
<tr>
<td>山本</td>
<td>
<input type="number" style="font-size: 16px;" value="27">
</td>
<td>男</td>
<td>栃木</td>
</tr>
<tr>
<td>高橋</td>
<td>
<input type="number" style="font-size: 16px;" value="42">
</td>
<td>女</td>
<td>高知</td>
</tr>
<tr>
<td>渋谷</td>
<td>
<input type="number" style="font-size: 16px;" value="35">
</td>
<td>男</td>
<td>神奈川</td>
</tr>
</table>
</body>
</html>
#テキストボックスを含むTableからtdタグの値を全取得する関数
sample.js
function getTableData(){
// 抽出したデータを格納する配列
let data = [];
// idでhtmlからtableの要素を取得し、trタグのNodeListを取得
let table = document.getElementById('table');
let tbl_tr = table.querySelectorAll('tr');
//テーブルの1行(trタグ)毎に処理
tbl_tr.forEach(function(tr){
//tdタグのNodeListを取得
let cells = tr.querySelectorAll('td');
//テーブルのヘッダー部分は飛ばす
if (cells.length!=0){
// テーブルの1行(trタグ)のデータを格納する配列
let d =[];
//セル(tdタグ)毎に処理
cells.forEach(function(td){
//セルがinputタグだった場合
if(td.innerHTML.indexOf('input') != -1) {
d.push(td.firstElementChild.value);
}
//セルがtextだった場合
else if(td.textContent!=""){
d.push(td.textContent);
}
//セルが空白だった場合
else{
d.push("");
}
});
data.push(d);
}
});
return data
}
このjsファイルで作成しているgetTableData()を呼び出してあげると、以下のような配列が返ってきます。
0: (4) ["山本", "27", "男", "栃木"]
1: (4) ["高橋", "42", "女", "高知"]
2: (4) ["渋谷", "35", "男", "神奈川"]