はじめに

通常の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", "男", "神奈川"]

【JavaScript】テキストボックスを含むTableからテキストを取得する

はじめに

やりたいこと

テキストボックスを含むTableからtdタグの値を全取得する関数