如何在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 an tds 沒有顯示在 table 標簽中

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();
    });
});

委托的事件處理程序通過在所希望的元件的祖先監聽工作，那么當所選擇的事件冒泡到該元素，則它適用jQuery選擇找到所需的元素，然后它將該函數應用於引起事件的任何匹配元素。

如果您沒有方便的、不變的祖先，請使用$(document).on ，但不要使用$('body').on因為 body 有一些奇怪的副作用。

委托事件有幾個好處：

1. 簡化和分離事件代碼。
2. 您沒有將單個處理程序添加到項目的開銷。

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

TR s 沒有被附加到添加的TABLE （而是附加到 DIV 中）

我將選擇器更改為：

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

Answer 2

嘗試刪除 each 函數內的事件綁定，並在此上下文中使用event-delegation ，

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