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数据时调用该函数，以便将click处理程序绑定到表和元素。

//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
});

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

2 个答案: