JavaScript：テーブル内のすべての「入力」を見つけよう

Question

JavaScriptでこれを書く方法はありますか？

var data = []; 
    var table = document.getElementById('address'); 
    var rows = table.getElementsByTagName('tr'); 
    for (var x = 0; x < rows.length; x++) { 
     var td = rows[x].getElementsByTagName('td'); 
     for (var y = 0; y < td.length; y++) { 
      var input = td[y].getElementsByTagName('input'); 
      for (var z = 0; z < input.length; z++) { 
       data.push(input[z].id); 
      } 
     } 
    } 

Answer 1

element.getElementsByTagName子どもたちだけでなく、すべての子孫を見つけたので：

<script type="text/javascript> 

    var data = []; 
    var table = document.getElementById('address'); 
    var input = table.getElementsByTagName('input'); 
    for (var z = 0; z < input.length; z++) { 
     data.push(input[z].id); 
    } 

</script> 

Answer 2

うん。

var data = [], 
    inputs = document.getElementById('address').getElementsByTagName('input'); 

for (var z=0; z < inputs.length; z++) 
    data.push(inputs[z].id); 

注意、でも3つのループを使用して長いバージョンであなたも言うことができる：最近のブラウザのために

var rows = table.rows; 
// instead of 
var rows = table.getElementsByTagName('tr'); 

// and, noting that it returns <th> cells as well as <td> cells, 
// which in many cases doesn't matter: 
var tds = rows[x].cells; 
// instead of 
var tds = rows[x].getElementsByTagName('td'); 

Answer 3

:)

var table, inputs, arr; 

table = document.getElementById('test'); 
inputs = table.querySelectorAll('input'); 
arr = [].slice.call(inputs).map(function (node) { return node.id; }); 

ライブデモ：http://jsfiddle.net/HHaGg/

だから代わりにf forループでは、mapメソッドを使用します。各配列要素（各INPUTノード）は、そのID値で置き換えられます。

もinputsがのNodeList素子であるため`inputs.map(...が動作しないことに注意してください - それは、標準的な配列配列のようなオブジェクトだが、ではありません。それでもmapメソッドを使用するには、配列を[].slice.call(inputs)の配列に変換するだけです。