如何在不使用按钮或 tbody 的情况下单击动态生成的 table 中的一行来获取 HTML table 中单元格的值

Question

我希望能够在一行上的任意位置单击并获取其第一个单元格的内容，无论我单击何处。请注意，这是一个 动态生成的 table 并且仅由 <th>、<tr> 和 <td> 元素组成 (没有 <tbody>)，因此 table 中的 none 行有 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 已经存在于页面上并且您希望将点击事件绑定到动态添加的行，则可以引用 table 元素：

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

Demo

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

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

如果您希望在所有 table 上都发生此点击事件，您可以这样做：

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

如何在不使用按钮或 tbody 的情况下单击动态生成的 table 中的一行来获取 HTML table 中单元格的值

How do I get the value of a cell in an HTML table on click of a row from a dynamically generated table without using buttons or tbody

javascript

jquery

html-table

click

jquery-selectors