使用AJAX返回数据填充的HTML表的突出显示行

Question

如何在单击鼠标时获取表的行值？ 该表中的数据是使用AJAX返回的数据填充的。

以下是无效的代码：

$('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]));
});

Answer 1

我不确定我是否完全遵循您的问题，您的标题和说明似乎冲突。 您是否希望在点击时获得特定单元格的价值？ 您的问题说您想要连续的价值...

如果我对它的理解正确，则您可能需要单击某个特定单元格的值，或者要突出显示正在单击的该单元格的行。

我已经使用简单的解决方案设置了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');

});

Answer 2

您的代码无法正常运行的原因是，您将事件处理程序附加到了某些元素，但是随后用AJAX调用中的新元素替换了这些元素。

您需要在一个不会改变的元素上设置一个事件处理程序，例如，表格（如果表格被完全替换，则需要找到一个永远不变的高级祖先）。

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