JavaScript 表格行內按鈕取得同行隱藏 input 值：原生 DOM 與 jQuery 兩種實現

在動態生成的 HTML 表格中，每行包含一個「確定」按鈕與一個 type="hidden" 的 input[name="cn"]，需點擊按鈕時取得**該行**對應的隱藏值。核心技巧：**從事件目標 (this/event.target) 向上尋找共同祖先 tr 或 td，再向下查找目標 input**。

原生 JavaScript 實現 (零依賴、效能最佳)

function getInputValue(btn) {
    // 1. 從按鈕向上找最近的 td (或 tr)
    const cell = btn.closest('td'); // 支援 IE15+ / Edge / 現代瀏覽器
    // 兼容舊瀏覽器: let cell = btn.parentElement; while (cell && cell.tagName !== 'TD') cell = cell.parentElement;

    // 2. 在該 td 內查找 name="cn" 的 input
    const input = cell.querySelector('input[name="cn"]');
    if (input) {
        alert('當前行隱藏值: ' + input.value);
        // 實際業務邏輯...
    }
}

HTML 結構範例：

    

        

            確定
            
        
    
    

        

            確定
            
        
    
    

        

            確定
            
        
    

jQuery 實現 (簡潔、舊專案常用)

// 事件委派：針對動態新增的行也有效
$('#dataTable').on('click', 'button', function() {
    const value = $(this).closest('td').find('input[name="cn"]').val();
    alert('當前行隱藏值: ' + value);
});

// 或綁定在 tr 上 (若按鈕在 td 之外)
$('#dataTable').on('click', 'button', function() {
    const value = $(this).closest('tr').find('input[name="cn"]').val();
    alert(value);
});

關鍵 API 對照表

常見錯誤避坑

• ❌ document.getElementsByName('cn')[0] → 只取全頁第一個，非當前行。
• ❌ btn.parentNode.getElementsByTagName('input')[0] → 若按鈕被 span 包裹，層級錯誤。**請用 closest() 找穩定祖先 (td/tr)**。
• ❌ 重複 id="cn" → ID 必須唯一，**請用 name 或 data-* 屬性**。

進階：取得整行所有欄位資料

function getRowData(btn) {
    const row = btn.closest('tr');
    const cells = row.querySelectorAll('td');
    const data = {};
    cells.forEach((cell, idx) => {
        const input = cell.querySelector('input');
        if (input) data['col' + idx] = input.value;
        // 或取顯示文字: cell.textContent.trim()
    });
    return data;
}

總結

表格行內按鈕取值核心模式：**btn.closest('tr/td').querySelector('target')**。原生 closest() + querySelector() 現代瀏覽器全支援，無需引入 jQuery，體積更小、效能更高。動態表格請採用事件委派 (table.on('click', 'button', ...)) 避免重複綁定。