核心實現
// HTML 結構
// jQuery 事件綁定 (事件委託，支援動態添加行)
$('#data-table tbody').on('click', 'tr', function(e) {
// 排除點擊按鈕/鏈接時觸發行跳轉 (可選)
if ($(e.target).closest('button, a').length) return;
var row = $(this);
var id = row.data('id'); // 獲取 data-id
var url = row.data('url'); // 獲取 data-url
// 或從單元格提取
// var id = row.find('td:first').text();
// 跳轉
window.location.href = url; // 或 '/edit/' + id
});
// 原有按鈕點擊事件保持不變
$('.btn-edit').on('click', function(e) {
e.stopPropagation(); // 阻止冒泡到 tr，避免雙重跳轉
var id = $(this).closest('tr').data('id');
window.location.href = '/edit/' + id;
});
關鍵技術點
| 技術 | 作用 | 注意事項 |
|---|
.on('click', 'tr', ...) | 事件委託，父元素監聽子元素事件 | 動態添加的行自動生效，效能優於逐行綁定 |
data-* 屬性 | HTML5 標準數據屬性，.data() 自動解析類型 | 避免在 class/id 中編碼業務數據 |
e.stopPropagation() | 阻止事件冒泡 | 按鈕點擊不觸發行點擊，邏輯隔離 |
e.target 判斷 | 識別實際點擊元素 | 排除輸入框、下拉框等交互元素 |
原生 JavaScript 實現 (無 jQuery)
document.querySelector('#data-table tbody').addEventListener('click', function(e) {
var row = e.target.closest('tr');
if (!row || row.parentElement !== this) return; // 非 tbody 直接子行
// 排除按鈕/鏈接
if (e.target.closest('button, a, input, select')) return;
var id = row.dataset.id;
var url = row.dataset.url;
if (url) window.location.href = url;
});
進階：鍵盤無障礙支援
// 使行可聚焦、可鍵盤操作
$('#data-table tbody tr').attr('tabindex', '0').on('keydown', function(e) {
if (e.key === 'Enter' || e.key === ' ') {
$(this).trigger('click');
}
});
// CSS 提示可聚焦
#data-table tbody tr:focus { outline: 2px solid #007bff; background: #f0f8ff; }
總結
使用 事件委託綁定 tbody 的 click 到 tr，配合 data-* 屬性存儲業務標識，stopPropagation 隔離按鈕點擊，即可實現「點擊任意行位置跳轉」且不影響原有按鈕功能。原生 JS closest() + dataset 同樣簡潔高效。
