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); 

注意，即使在三個環路的再版本，你也可以說：

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/

所以，而不是o f for循環，我使用map方法 - 每個數組元素（每個INPUT節點）被替換爲其ID值。

還要注意的是`inputs.map(...不起作用，因爲inputs是節點列表元素 - 這是一個類似數組的對象，但不是一個標準的數組。爲了仍然使用它的map方法，我們只需要將它轉換爲一個數組，這對我們來說是[].slice.call(inputs)。