Javascript選擇元素

Question

如何通過了解列索引來從表列中選擇所有複選框？

LE：這需要在普通的JavaScript來加以解決，而不是jQuery的

Answer 1

使用第n個孩子選擇！ http://api.jquery.com/nth-child-selector/

Answer 2

假設沒有colspans或rowspans，那麼你可以用jQuery做到這一點相當簡單：

$('#mytable tr td:nth-child('+index+') input[type="checkbox"]'); 

@Dustin萊恩加好點：第n個孩子索引開始於1，不是0

Answer 3

如果你打算用普通的javascript來做到這一點，我會建議在每個複選框中添加一個類名來將它與表列相關聯。所以，你的表會是這個樣子：

<table id="mytable"> 
     <tr> 
       <td><input type="checkbox" class="column-1" name="a"></td> 
       <td><input type="checkbox" class="column-2" name="b"></td> 
       <td><input type="checkbox" class="column-3" name="c"></td> 
     <tr> 
     <tr> 
       <td><input type="checkbox" class="column-1" name="d"></td> 
       <td><input type="checkbox" class="column-2" name="e"></td> 
       <td><input type="checkbox" class="column-3" name="f"></td> 
     <tr> 
     <tr> 
       <td><input type="checkbox" class="column-1" name="g"></td> 
       <td><input type="checkbox" class="column-2" name="h"></td> 
       <td><input type="checkbox" class="column-3" name="i"></td> 
     <tr> 
</table> 

然後，你可以選擇所有的複選框，在這樣的柱：

document.getElementsByClassName('column-'+index) 

Answer 4

要做到這一點，最簡單的辦法是，爲李本推薦，設置一個id屬性，您可以在表格元素本身輕鬆找到它。然後，您可以使用下面的方法找到你的表：

var myTable = document.getElementById("<idattributevalue>"); 

現在我們必須通過所有有問題的列索引行的迭代（我們就叫它「myIndex」），我們現在有一個函數我們可以用它來找到你所有的複選框：

function findMyCheckboxes(myTable, myIndex) { 

    var myCheckboxes = []; 
    var cell = null; 
    var allInputs = null; 

    var myRows = myTable.rows; 

    for (var i = 0; i < myRows.length; i++) { 
    // Get the cell for each row at the index we know 
    cell = myRows[i].cells[myIndex]; 
    // Get all input tags in that cell 
    allInputs = cell.getElementsByTagName("input"); 
    // Only pick the inputs which are checkboxes 
    for (var j = 0; j < allInputs.length; j++) { 
     if (allInputs[j].type == "checkbox") { 
     myCheckboxes.push(allInputs[j]); 
     } 
    } 
    } 

    return(myCheckboxes); 

} 

這段代碼當然可能有一些語法錯誤。隨意指出。

Answer 5

像這樣簡單的東西可能會工作，具體取決於您的表結構。

var colIndex = 1; // 0-based 
var table = document.getElementById('mytable'); 
var numRows = table.getElementsByTagName('tr').length; 
for (var i=0; i<numRows; i++) 
{ 
var box = table.getElementsByTagName('tr')[i].getElementsByTagName('td')[colIndex].getElementsByTagName("input")[0]; 
box.setAttribute("checked", "true"); 
}