js 获取列的值

在 JavaScript 中获取表格列的值，常见的方法是通过 DOM 操作来实现。

假设我们有以下的 HTML 表格结构：

<table id="myTable">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>上海</td>
  </tr>
</table>

以下是几种获取列值的方式：

方法一：通过循环遍历行和单元格

function getColumnValues(columnIndex) {
  var table = document.getElementById("myTable");
  var rows = table.rows;
  var values = [];
  for (var i = 1; i < rows.length; i++) { 
    // 从 1 开始跳过表头行
    var cells = rows[i].cells;
    values.push(cells[columnIndex].innerHTML);
  }
  return values;
}

// 获取第二列（年龄）的值
var ages = getColumnValues(1);
console.log(ages);

方法二：使用 querySelectorAll

function getColumnValues(columnIndex) {
  var cells = document.querySelectorAll("#myTable tr td:nth-child(" + (columnIndex + 1) + ")");
  var values = [];
  cells.forEach(function(cell) {
    values.push(cell.innerHTML);
  });
  return values;
}

var ages = getColumnValues(1);
console.log(ages);

优势：