JavaScript 點擊表格儲存格讀取內容

最簡單實現

在 `` 上直接綁定 `onclick`，傳遞 `this` 參數給處理函數。

<!DOCTYPE html>
<html>
<body>
<script>
function tdClick(cell) {
    alert(cell.innerHTML); // 或 cell.textContent 取純文字
}
</script>

<table border="1">
    <tr>
        <td onclick="tdClick(this)">儲存格 1</td>
        <td onclick="tdClick(this)">儲存格 2</td>
    </tr>
    <tr>
        <td onclick="tdClick(this)">儲存格 3</td>
        <td onclick="tdClick(this)">儲存格 4</td>
    </tr>
</table>
</body>
</html>

進階：事件代理（動態表格適用）

<table id="dataTable"></table>

<script>
document.getElementById('dataTable').addEventListener('click', function(e) {
    var td = e.target.closest('td');
    if (td && td.parentElement.tagName === 'TR') { // 確保點擊在 td 內
        console.log('內容:', td.textContent);
        console.log('列索引:', td.cellIndex);
        console.log('行索引:', td.parentElement.rowIndex);
    }
});

// 動態新增列
function addRow() {
    var table = document.getElementById('dataTable');
    var row = table.insertRow();
    row.insertCell().textContent = '新儲存格 ' + Date.now();
    row.insertCell().textContent = '另一欄';
}
</script>

jQuery 寫法

$('#dataTable').on('click', 'td', function() {
    var $td = $(this);
    alert($td.text());
    // 取得行/列索引
    var rowIdx = $td.closest('tr').index();
    var colIdx = $td.index();
});

關鍵屬性

• `cell.innerHTML`：含 HTML 標籤的內容。
• `cell.textContent` / `$(cell).text()`：純文字，無標籤。
• `cell.cellIndex`：儲存格在列中的索引（0 基）。
• `cell.parentElement.rowIndex`：列在表格中的索引（0 基）。