jQuery遍歷表格：精準獲取指定行列數據的選擇器技巧

jQuery操作表格時，靈活運用選擇器與遍歷方法能高效提取任意單元格數據。本文針對「獲取第一行第二列」等常見需求，提供多種解法。

場景：HTML表格結構

<table id="dataTable">
  <tr><th>ID</th><th>Name</th><th>Age</th></tr>
  <tr><td>1</td><td>Person</td><td>100</td></tr>
  <tr><td>2</td><td>Gesion</td><td>200</td></tr>
  <tr><td>3</td><td>Adam</td><td>300</td></tr>
</table>

核心選擇器與方法

實戰代碼示例

// 1. 獲取第一行第二列（數據行）文本
var firstRowSecondCol = $("#dataTable tbody tr:first td:eq(1)").text(); // "Person"

// 2. 獲取所有行第二列數組
var names = [];
$("#dataTable tbody tr").each(function() {
    names.push($(this).find("td:eq(1)").text());
});
console.log(names); // ["Person", "Gesion", "Adam"]

// 3. 動態行列定位（如點擊單元格獲取行列索引）
$("#dataTable td").click(function() {
    var rowIndex = $(this).parent().index(); // 0-based in tbody
    var colIndex = $(this).index();
    alert("Row: " + rowIndex + ", Col: " + colIndex + ", Value: " + $(this).text());
});

避坑指南

• ❌ `$("table tr:nth-child(1)")` 會選中表頭行（若無tbody）。
• ✅ 始終用 ``/`` 語義化結構，選擇器加 `tbody` 前綴。
• ✅ 优先用 `.find("td:eq(n)")` 而非 `:nth-child`，避開th干擾。
• ✅ 大表格考慮虛擬滾動或原生JS操作性能更優。

掌握這幾個選擇器組合，表格數據提取隨心所欲。