当 tbody 不存在时附加到表以及如何使所有现有的 jquery 为该行工作

Question

我有以下 jquery 可以根据用户交互和从服务器接收到的数据动态地附加到表中。现在表中的每一列都有一些特定的类和一些样式属性，如列 itemId 是隐藏的等等。如果我已经有一行，我的动态添加工作正常，但如果没有，它只会添加另一个标题行，我可以理解这是因为我的代码复制了最后一个 tr 元素。问题是当他们没有行时，我如何去添加一行到 'tbody'。

    function responseTopicAdded(data) {
        $('#dialog-modal').dialog('close');
        rowcopy = $('#datatable tr:last').clone();
        rowcopy.children().each(function() {
            switch($(this).attr('class')) {
                case 'Name':
                    $(this).html(data.Name);
                    break;
                case 'Description':
                    $(this).html(data.Description);
                    break;
                case 'Icon':
                    $(this).html('<img src='+ data.Icon +'/>');
                    break;
                case 'itemId':
                    $(this).html(data.itemId);
            }
        });
        $('#datatable tr:last').after($(rowcopy));
    }

我的第二个问题是我的表格单元格响应双击。但是新添加的行永远不会响应（即使有之前的行并且该行被正常添加）。

为什么侦听器不在新行上工作？

我的听众是这样的：

$(document).ready(function() {
    try {
        $("td").dblclick(function() {
            // ... my code goes here
    }catch(a){
        alert(a);
    }
}

Answer 1

双击事件对新添加的行不起作用的原因是您在元素存在之前绑定了单击事件。尝试使用这种样式绑定（事件委托是术语）：

$("#datatable").on("dblclick", "td", function() { //do stuff });

根据在不存在时添加tbody，只需检查是否存在：

if ($("#datatable tbody").length) { //it exists! } else { //it doesnt exist! }

Answer 2

您可以使用模板方法为表格行创建模板，以便在需要时进行克隆。

假设你的桌子是这样的：

<table id="datatable">
    <thead>
          <tr><th>Name</th>
          <th>Description</th>
          <th>icon</th>
          <th>itemID</th></tr>
    </thead>
   <tbody></tbody>
</table>

当您填充时：

//Create the template here// or keep it in HTML itself in a hidden div or something.
var template = $("<tr><td class='Name'></td><td class='Description'></td><td class='Icon'></td><td class='itemId'></td></tr>");

$(function () {

var newRow = $(template).clone(); //Clone the template

//just an initial load
newRow.find('.Name').text('AAA');
newRow.find('.Description').text('Some Description');
newRow.find('.Icon').text('Some Icon');
newRow.find('.itemId').text('1234');

//Initially clone
$('#datatable').find('tbody').append(newRow);

    //register the handler using event delegation
    $('#datatable tbody').on('click', 'tr', function () {
        alert('clicked on ' + $(this).find('.Name').text());
    });

    $('#addNew').on('click', function () {
        var rowcopy = $(template).clone(); //Clone the template
        var data = {
            Name: 'BBB',
            Description: 'Some Description',
            Icon: 'http://placehold.it/32x32',
            itemId: '45676'
        };

       //Set the Css class name based on even odd row
       rowcopy.addClass(function(){
        return $('#datatable tbody tr').length % 2 == 0 ? "odd" : "even";
       });

        rowcopy.children().each(function () {
            switch ($(this).attr('class')) {
                case 'Name':
                    $(this).html(data.Name);
                    break;
                case 'Description':
                    $(this).html(data.Description);
                    break;
                case 'Icon':
                    $(this).html('<img src=' + data.Icon + '/>');
                    break;
                case 'itemId':
                    $(this).html(data.itemId);
            }
        });
        $('#datatable tbody').append($(rowcopy)); //Append it to the tbody.
    });

});

Demo

要添加偶数/奇数样式，您可以使用 css 本身。

#datatable tbody tr:nth-child(odd) {
    background-color:#cecece;
}
#datatable tbody tr:nth-child(even) {
    background-color:yellow;
}

如果你不想在课堂上这样做，那么：

rowcopy.addClass(function(){
            return $('#datatable tbody tr').length % 2 == 0 ? "odd" : "even";
});

Demo