0
1

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 3 years have passed since last update.

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

Last updated at Posted at 2020-06-22

#はじめに
通常のtext要素だけで構成されるtableからテキストを取得する方法の解説記事は多かったが、
inputを含んだtableから取得している記事はあまり見られなかったので、メモついでに。
まあ、やっていることはほぼ変わらないのですが...

#やりたいこと
こんな感じでtdタグの中にinputが入っていて、ユーザーが編集できたりするテーブルですね。
このテーブルからinputの部分も含めて、body部分のテキストを全て抽出します。

20200622-152056.png

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", "男", "神奈川"]
0
1
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
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?