JavaScript 选择元素

Question

如何通过了解列索引来选择表列中的所有复选框？

LE：这需要用普通的 Javascript 来解决，而不是 jQuery

Answer 1

最简单的方法是，正如 Ben Lee 建议的那样，设置一个 id 属性，您可以在表元素本身上轻松找到该属性。然后，您可以使用以下命令来查找表：

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

现在我们必须迭代具有相关列索引的所有行（我们将其称为“myIndex”），我们现在有一个函数可以用来查找您的所有表checkboxes：

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 2

使用第 n 个子选择器！
http://api.jquery.com/nth-child-selector/

Answer 3

假设没有 colspans 或 rowspans，那么你可以使用 jQuery 相当简单地做到这一点：

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

@Dustin Laine 添加了一个好点：第 n 个子索引从 1 开始，而不是 0。

Answer 4

如果您打算用纯 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 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"); 
}