突出顯示使用AJAX返回數據填充的HTML表格的行

如何在鼠標單擊時獲取表格的行值？此表中的數據由使用AJAX返回的數據填充。突出顯示使用AJAX返回數據填充的HTML表格的行

下面是一個不正常的代碼：

$('table#tblBdy tbody tr').click(function() { 
    $('tr').click(function() { 
    var tableData = $(this).closest("tr").children("td").map(function() { 
    return $(this).text(); 
    }).get(); 
    $('#bx1txt').val($.trim(tableData[0])); 
    $('#bx2txt').val($.trim(tableData[1])); 
    $('#oldqty').val($.trim(tableData[1])); 
});

來源

2015-04-22 Suneet

您可以在運行此代碼時發佈DOM樹嗎？ –

我的問題完全不同。我想突出顯示鼠標點擊html表格行的價值 – Suneet

你能解釋這種代碼不工作的方式嗎？點擊一行時點擊處理程序本身是否觸發？ 'tableData'表達式到底有多遠？你有沒有試過打破它，看看最接近的（）'和'children（）'方法能達到你所期望的？ – halfer

我不知道我完全按照你的問題，你的標題和描述似乎矛盾。您是否希望在點擊時獲得特定單元格的價值？你的問題說你想要一行的值...

如果我理解正確，你要麼單擊某個特定單元格的值，要麼突出顯示該單元格的行點擊。

我用簡單的解決方案設置了codepen http://codepen.io/anon/pen/oXNeMx。

根據表格的生成方式，您可以將該JavaScript代碼放入其自己的函數中，並在您擁有新的AJAX數據時調用該函數，以便將點擊處理程序綁定到表格和元素。

//handles table cell click events 
$('td').click(function(){ 

    //updates the value 
    var cellValue = $(this).html(); 

    //find the row of table where cell was clicked 
    var tr = $(this).closest('tr'); 

    //removes select class from all rows 
    $(tr).siblings().removeClass('highlight'); 

    //adds class to highlight selected row 
    tr.addClass('highlight'); 

});

來源

2015-04-22 21:34:57

你的代碼是不工作的原因是因爲你附加一個事件處理程序的一些元素，但後來更換了從AJAX調用新的元素。

你需要在一個不會改變的元素上設置一個事件處理程序，例如，表（如果你完全替換表，你需要找到一個永遠不會改變的更高的祖先）。

// ancestor  event real selector 
$('#tblBdy').on('click', 'tbody td', function() { 
    // Same code as yours in the handlers 
});

來源

2015-04-23 07:00:17

請參閱上面的修改 - 「更新的代碼」。點擊一行html表格不工作 - 既不突出顯示整個點擊的行，也沒有選中所選行的單元格值並放入文本框中，我有兩個文本框：表格下面應該有「bx1txt」和「bx2txt」當用戶選擇一行時被填充。所選行列1和列2的值應分別填入這些框中。請幫忙？？ – Suneet

請在http://jsfiddle.net/爲我提供一個工作示例 – Suneet

突出顯示使用AJAX返回數據填充的HTML表格的行

回答

相關問題