如何在不使用按钮或正文的情况下，在单击动态生成的表中的行时获取 HTML 表中单元格的值

Question

我希望能够单击行上的任意位置并获取其第一个单元格的内容，无论我单击在哪里。 请注意，这是一个动态生成的表，仅由<th>、<tr>和<td>元素组成(无<tbody>(，因此该表中的所有行都没有id。 注释部分可以独立工作，那么为什么我无法从第一个单元格中获取文本呢？ 或者即使只是行的内容也是一个好的开始。 我的选择器在我//trying to get the contents的函数中的任何位置有问题吗？ 我不知道这有什么问题。

//  Build HTML Table
function buildHtmlTable(portalData, tablename) {
var columns = [];
var headerTr$ = $('<tr/>');
var n = 0;
if (tablename == "order-table") {
document.getElementById("dist-name").innerText = JSON.parse(JSON.stringify(portalData[0], null, 2))["Company Name"];
n = 1;
}
for (var i = 0 ; i < portalData.length ; i++) {
var rowHash = portalData[i];
for (var key in rowHash) {
if ($.inArray(key, columns) == -1) {
columns.push(key);
headerTr$.append($('<th/>').html(key));
}
}
}
$('#' + tablename).append(headerTr$);
for (i = 0 ; i < portalData.length ; i++) {
var row$ = $('<tr/>');
for (var colIndex = n ; colIndex < columns.length ; colIndex++) {  // n is how many columns to drop, based on table name
var cellValue = portalData[i][columns[colIndex]];
if (cellValue == null) {
cellValue = "";
}
row$.append($('<td/>').html(cellValue));
}
$('#' + tablename).append(row$);
}
// Drop unnecessary columns
for(i = 0 ; i<n; i++) {
$("#order-table").find('td,th').first().remove();
}
//Trying to get the contents
$(function(){
$("#order-table td").click(function() {     
// var column_num = parseInt( $(this).index() ) + 1;
// var row_num = parseInt( $(this).parent().index() );    
// alert( "Row_num = " + row_num);   
var column = $(this);
var row = ($(this).parent());
alert(row.innerText);
alert(column.innerText);
});
});
}

Answer 1

您可以将单击事件绑定到页面上的现有元素，并使用 DOM 导航获取第一个单元格的值。 因此，例如，如果页面上已存在表，并且您希望将单击事件绑定到动态添加的行，则可以引用table元素：

$(document).ready(function() {
$('table').on('click', 'tr', function() {
var value = $(this).find('td:first-child').text();
//do something with value
});
});

演示

在您的情况下，您似乎正在动态地将表本身添加到页面中。 在这种情况下，您可以绑定到document并引用动态添加的表的 id：

$(document).ready(function() {
$('document').on('click', '#order-table tr', function() {
var value = $(this).find('td:first-child').text();
//do something with value
});
});

如果您希望在所有表上执行此单击事件，则可以执行以下操作：

$(document).ready(function() {
$('document').on('click', 'table tr', function() {
var value = $(this).find('td:first-child').text();
//do something with value
});
});