如何在jquery中删除表格单元格

Question

如何在display_removebutton上单击时删除单元格并重新排列整个结构 这是我试图实现的代码。我尝试了$("td:empty").remove();但没有用，它没有用 可以任何人建议任何修改

 var int_loop =  1;
    var flag_tr = 1;
    $('#total').append("<table width=100%>"); 

    $(upfiles).each(function(index, file) 
    {
        display_removebutton = "<img width='20px' style='cursor:pointer;' height='20px' class='class_remove' data-id='"+int_loop+"' id='remove_"+int_loop+"' src='images/DeleteRed.png' />";
        if(flag_tr === 1 && int_loop ===1)
            $('#total').append("<tr>"); 
       else if(flag_tr === 6)
             $('#total').append("<tr>");
        $('#total').append("<td class='div_files' id='div_selec"+int_loop+"'><b>File Name :</b>"+file.name + display_removebutton+"</td>" ); 
        if(flag_tr === 6)
        {
              $('#total').append("</tr>");
              flag_tr = 1;
        } 
        $("#remove_"+int_loop).click(function() {
            //REMOVED FILES USING SPLICE SUCCESSFULLY

            //How do i remove cell here and rearrange the entire structure

            $("td:empty").remove(); //tried with this but no use, it is deleting the entire data in a div
        });
        int_loop++;
        flag_tr++;
    }

已编辑1：

以下是jsfiddle

已修改2：此外，我正在为表格标签正确追加打开和关闭。因为tr tds没有显示在表格标签

中

Answer 1

以下是jsFiddle的工作版本，其中包含示例数据和所有修复程序：

• 您需要将closest TD移至按钮点击。
• 您需要将TD附加到TR和
• 您需要将TR附加到TABLE：
• 您还想要一个不错的过渡（添加淡入淡出）
• 您不希望附加结束</TR>元素（不需要）
• 您应该使用委托事件来动态添加元素

http://jsfiddle.net/TrueBlueAussie/dXwR8/9/

// Some sample data
var upfiles = [{
    name: "name1"
}, {
    name: "name2"
}, {
    name: "name3"
}, {
    name: "name4"
}, {
    name: "name5"
}, {
    name: "name6"
}, {
    name: "name7"
}

];

var int_loop = 1;
var flag_tr = 1;
$('#total').append("<table width=100%>");

$(upfiles).each(function (index, file) {
    display_removebutton = "<img width='20px' style='cursor:pointer;' height='20px' class='class_remove' data-id='" + int_loop + "' id='remove_" + int_loop + "' src='images/DeleteRed.png' />";
    if (flag_tr === 1 && int_loop === 1) {
        $('#total table').append("<tr>");
    } else if (flag_tr === 6) {
        $('#total table').append("<tr>");
    }
    $('#total tr:last').append("<td class='div_files' id='div_selec" + int_loop + "'><b>File Name :</b>" + file.name + display_removebutton + "</td>");
    if (flag_tr === 6) {
        $('#total').append("</tr>");
        flag_tr = 1;
    }
    int_loop++;
    flag_tr++;
});
$('#total').on('click', '[id^=remove_]', function () {
    var $td = $(this).closest('td');
    $td.fadeOut(function () {
        $td.remove();
    });
});

---

以下旧版本

---

更新

DOM结构无效。您无法将TD直接添加到表中。那必须是TR。我将代码更改为始终添加到表中的最后一个TR。

另一个更新 - 转换：

JSFiddle：当然：jsfiddle.net/TrueBlueAussie/dXwR8/7

如果你想在删除前淡入淡出，请记住局部变量中的元素，并使用fadeOut()的回调删除该项。

    var $td = $(this).closest('td');
    $td.fadeOut(function(){ $td.remove(); });

又一次更新：委托事件

JSFiddle：http://jsfiddle.net/TrueBlueAussie/dXwR8/8/

balachandran建议你为动态项使用委托事件处理程序是完全正确的。它简化了代码。

$('#total').on('click', '[id^=remove_]', function () {
    var $td = $(this).closest('td');
    $td.fadeOut(function () {
        $td.remove();
    });
});

委托事件处理程序通过侦听所需元素的祖先来工作，然后当所选事件冒泡到该元素时，< em> then 它应用jQuery选择器来查找所需的元素，然后它将函数应用于导致事件的任何匹配元素。

如果您没有方便，不变的祖先，请使用$(document).on，但不要$('body').on因为身体有一些奇怪的副作用。

委托活动有几个好处：

1. 简化和分隔事件代码。
2. 您没有为项目添加个别处理程序的开销。

最终更新：http://jsfiddle.net/TrueBlueAussie/dXwR8/9/

TR未附加到添加的TABLE（他们正在附加到DIV）

我将选择器更改为：

$('#total table').append("<tr>");

Answer 2

尝试在每个函数中删除该事件绑定，并在此上下文中使用event-delegation，

$('#total').on('click','[id^="remove_"]',function(){
  $(this).closest('tr').find('td:empty').remove();
});