JavaScriptでテーブルの入力値をループして取得する方法

お世話になります。

HTML、CSS、JavaScriptを使用して簡単な登録管理サイトを作成しています。
処理の中で、以下のようなリストとテキストボックスが混在するテーブルの入力値をループ処理で取得したいのですが
入力値の取得がうまくいきません。

■HTML

  <table id="tbl">
    <tr>
      <td>
        <select id="number1">
          <option>001</option>
          <option>002</option>
        </select>
      </td>
      <td>
        <input type="text" id="txt1">
      </td>
    </tr>
    <tr>
      <td>
        <select id="number2">
          <option>001</option>
          <option>002</option>
        </select>
      </td>
      <td>
        <input type="text" id="txt2">
      </td>
    </tr>
  </table>

■JavaScript

var tblData = document.getElementById("tbl");
  for (var i = 0, rowlen = tblData.rows.length; i < rowlen; i++) {
    for (var j = 0, collen = tblData.rows[i].cells.length; j < collen; j++) {
      var txtTbldata = tblData.rows[i].cells[j].text();
    }
  }

textプロパティを指定して取得しても、リストの場合は"001002"、テキストボックスの場合は""と
値が返ってきて、入力した値が返ってきませんでした。
プロパティを変更しても、思った値を取得できなかったのでデータの取り方が違うのかなと思いましたが
JavaScriptを始めたばかりで参考文献も手元にないため質問させていただきました。

アドバイスのほどよろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

JavaScriptを始めたばかりで参考文献も手元にないため質問させていただきました。

困った時はMDNを見るといいですよ！

HTMLSelectElement.value

Is a DOMString representing the value of the form control (the first selected option).
HTMLSelectElement - Web API インターフェイス | MDN

value string: Returns / Sets the current value of the control.

HTMLInputElement - Web APIs | MDN

コメントを受けて追記

HTML
1<table id="tbl">
2    <tr>
3      <td>
4        <select id="number1">
5          <option>001</option>
6          <option>002</option>
7        </select>
8      </td>
9      <td>
10        <input type="text" id="txt1">
11      </td>
12    </tr>
13    <tr>
14      <td>
15        <select id="number2">
16          <option>001</option>
17          <option>002</option>
18        </select>
19      </td>
20      <td>
21        <input type="text" id="txt2">
22      </td>
23    </tr>
24  </table>
25  <button>
26  test
27  </button>

javascript
1var tblData = document.getElementById("tbl");
2document.querySelector('button').addEventListener('click', e => {
3  let txtTbldata = '';
4  for (var i = 0, rowlen = tblData.rows.length; i < rowlen; i++) {
5    for (var j = 0, collen = tblData.rows[i].cells.length; j < collen; j++) {
6      txtTbldata += tblData.rows[i].cells[j].children[0].value;
7    }
8  }
9  alert(txtTbldata);
10})

https://jsfiddle.net/pg14qncq/

こんな感じでいかが。

さらに行を少なくするなら、ワンライナーで書けますよ。

javascript
1document.querySelector('button').addEventListener( 
2  'click', 
3  e => alert( 
4    Array.prototype.reduce.call( 
5      document.getElementById("tbl").rows, 
6      ( pv, cv ) => pv + Array.prototype.reduce.call( 
7        cv.cells, 
8        ( pv, cv ) => pv + cv.children[0].value, 
9        '' 
10      ), 
11      ''
12    ) 
13  ) 
14);