如何从动态创建的表中获取 td 值

How to get td values from dynamically created table

本文关键字：获取 td 动态 创建      更新时间：2023-09-26

我看到很多类似的问题，但没有一个直接针对我的问题。我问题的业务逻辑是，我允许用户打开一个jQuery Dialog，在其中我创建加载了数据库中数据的表，当用户选择时，我从主屏幕加载选定的数据信息字段。

我目前的问题是从单击按钮时发生的<tr>中收集数据。如果它是一个硬编码表，我只会：

$(selector).on('click', function(){
  var $item = $(this).closest("tr").find('td');
})

然后对$item执行一些操作，但是每次发出 Ajax 请求时，表都会被销毁并重新创建，所以基本上我不能或至少我不知道使用某种选择器将事件绑定到的方法，以便我可以重现上面的代码。

相反，在动态表中，我有这个：

      <td><button onclick="getData();return false">Select</button>

这样做的问题（至少我怎么看）有两个问题——首先，在元素中使用onclick HTML。据我所知，这不是一个好的做法，有更好的选择，我将不胜感激。另外，即使我使用此代码，我也无法从以下每个<td>中提取文本：

function getData() {
...
}

我尝试了几种方法，包括使用静态表和绑定事件处理程序的方法。

最后，这里有一个 JS Fiddle 示例，我想我清楚地说明了我能做什么和不能做什么，所以你可以参考它。

检查这个小提琴

$(selector).on('click', function(){
  var $item = $(this).closest("tr").find('td');
})

使用上面的代码，您将绑定一个direct事件，但您想要的是delegated事件

要使用delegated事件，您应该使用这样的事件 

$(document).on('click',selector, function(){
  var $item = $(this).closest("tr").find('td');
})

所以你的最终代码将看起来像 

$(document).on('click','.get-data' ,function(){
    var $item = $(this).closest("tr").find('td');
    $.each($item, function(key, value){
        alert($(value).text());
    })
});

document可以是要创建的表的父级的任何内容。

添加新

表元素时不要忘记添加选择器

我遇到了同样的问题，并以这种方式解决了它。您可以使用数据库结果创建表，如下所示：

for (var i = 0; i < results.length; i++) {
   // create table row and append it to the table using JQuery
   // next create a td element, append it to the created tr
   // and attach a listener to it
   $('<td/>').html(results[i].textProperty)
             .appendTo($(tr))
             .on('click', getData);
}

其中 getData（） 是你的函数。

你可以像这样将参数传递给你的 getData：

.on('click', {info: results[i].data}, getData);

然后，您可以在函数中访问它们：

function getData(event) {
    console.log(event.data.info);
}

希望这有帮助！

编辑：通过这种方式，您可以为每个td创建一个侦听器。优化可能是为整个 td 元素类创建一个侦听器，并通过 HTML 属性或文本值将数据传递给它，就像批准的答案一样。

或者你可以在getdata方法中使用此pass对象

$('#build-table').on('click', function(){
        $('#temp-table').append('<table><thead><tr><th>Select</th><th>Name</th>    </tr></thead>' +
        '<tbody><tr><td><button class onclick="getData(this);return false">Select</button></td><td>Name1</td></tr>' +  
       '<tbody><tr><td><button onclick="getData(this);return false">Select</button></td><td>Name2</td></tr>' +
                                '</tbody></table>')
    });
    function getData(ob) {
    var $item = $(ob).closest("tr").find('td');
        $.each($item, function(key, value){
            alert($(value).text());
        })
    }
相关文章：