jQuery 獲取 TD 在所在 TR 中的索引位置

問題

已有一個 `` 元素（如通過 `this` 或選擇器獲取），需要獲取它在所屬 `` 中是第幾個 ``（從 0 或 1 開始計數）。

核心解法

// 返回從 0 開始的索引
var index = $(this).index();

完整示例

<table id="demo">
  <tr>
    <td>第一列</td>
    <td>第二列</td>
    <td class="target">第三列</td>
  </tr>
</table>

<script>
  $('.target').click(function() {
    // 獲取在父 tr 中的索引 (0-based)
    var idx = $(this).index();
    console.log('第 ' + (idx + 1) + ' 個 td');  // 輸出: 第 3 個 td
  });
</script>

關鍵點解析

• .index() **無參數時**：返回元素在**同類兄弟節點**中的索引位置
• 同類 = 同標簽名，即 `` 只在 `` 中找位置，不計算 ``
• 索引從 **0 開始**，第 1 個為 0，第 n 個為 n-1

進階用法

獲取在所有單元格(td+th)中的位置

// 父元素的所有單元格子節點
var allCells = $(this).parent().children('td, th');
var index = allCells.index(this);

獲取行索引 (tr 在 table 中位置)

var rowIndex = $(this).closest('tr').index();  // 0-based

完整座標 (行, 列)

var $td = $(this);
var col = $td.index();
var row = $td.closest('tr').index();
console.log('位置: 第' + (row+1) + '行, 第' + (col+1) + '列');

官方文檔參考

菜鳥教程 - jQuery index() 方法

注意事項

• 確保選擇器精確指向 `` 元素，而非內部內容
• 動態生成的表格需事件委托：`$(table).on('click', 'td', fn)`
• 合併單元格 (`colspan/rowspan`) 會影響視覺位置，但 `.index()` 反映 DOM 實際順序

核心一行代碼：$(td元素).index() 即可獲取 0-based 列索引。