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

Posted 2023-05-09

【中文标题】如何在不使用按钮或 tbody 的情况下从动态生成的表中单击一行来获取 HTML 表中单元格的值

【英文标题】：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

【发布时间】：2018-10-13 01:58:16

【问题描述】：

我希望能够单击一行上的anywhere 并获取其第一个单元格的内容，而不管我在哪里单击。请注意，这是一个动态生成的表，仅由<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);
        );
    );

【参考方案1】：

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

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

Demo

在您的情况下，您似乎正在将表格本身动态添加到页面中。在这种情况下，您可以绑定到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
  );
);

【讨论】：

虽然是的，我正在动态添加它，但它是一个单独的页面，其中 div 被隐藏和取消隐藏。事实上，在用户登录之前不会生成表。因此 $(document).ready 函数将不起作用......换句话说，如果它从服务器获得 OK 响应，那么它会构建表.然后它需要添加监听器。换句话说，您的第二个解决方案听起来是正确的。但它甚至不让我发出警报。你的第一个例子有一个 tbody，这个表没有。

@cryophoenix 表是否是动态的并不重要。文档元素不是动态的（DOM 中的元素是动态的，但文档本身不是动态的），因此，您可以将其用作侦听器的锚点。更多信息：***.com/questions/203198/…

我是否需要将此逻辑作为匿名放置在现有的表创建函数中，还是需要将其设为在表创建过程中调用的命名函数？请记住，当文档加载时，表格标签被创建并且表格是空的（没有th，tr，什么都没有）。只是一个<table id="order-table"></table> 点。所以当文档准备好时，这会在创建行之前将所有这些应用到那个空表，不是吗？

@cryophoenix：查看delegate event：learn.jquery.com/events/event-delegation。我会制作一个演示给你看。

@cryophoenix ：我已经用一个显示动态行的示例更新了我的答案中指向演示的链接。