jQuery删除HTML表格列答案

【问题标题】：jQuery remove HTML table columnjQuery删除HTML表格列
【发布时间】：2010-11-07 07:41:41
【问题描述】：

我有一个这样的 HTML 表格：

<table border="1">
    <tbody>
        <tr>
            <td><a href="#" class="delete">DELETE ROW</a>COL 1</td>
            <td><a href="#" class="delete">DELETE COL</a>COL 2</td>
            <td><a href="#" class="delete">DELETE COL</a>COL 3</td>
            <td><a href="#" class="delete">DELETE COL</a>COL 4</td>
            <td><a href="#" class="delete">DELETE COL</a>COL 5</td>
            <td><a href="#" class="delete">DELETE COL</a>COL 6</td>
        </tr>
        <tr>
            <td>ROW 1</td>
            <td>ROW 1</td>
            <td>ROW 1</td>
            <td>ROW 1</td>
            <td>ROW 1</td>
            <td>ROW 1</td>
        </tr>
        <tr>
            <td>ROW 2</td>
            <td>ROW 2</td>
            <td>ROW 2</td>
            <td>ROW 2</td>
            <td>ROW 2</td>
            <td>ROW 2</td>
        </tr>
    </tbody>
</table>

当我单击带有“删除”类的链接时，我需要一个函数来删除指定的列。你能帮我吗？

【问题讨论】：

标签： jquery html-table

【解决方案1】：

一种通用方式（未测试）：

$("a.delete").click(function() {
   var colnum = $(this).closest("td").prevAll("td").length;

   $(this).closest("table").find("tr").find("td:eq(" + colnum + ")").remove();
}

无需更改标记。

【讨论】：

优秀的指数计算概念。 +1
为了让这个对我有用，我需要做 $(this).closest("table").find("tr").find("td:eq(" + colnum + " )").remove();

【解决方案2】：

当我阅读这篇文章时，我尝试了第一个使用 jQuery 的删除功能的解决方案。但是在表格行上使用它来删除单元格时，这个功能似乎有问题。问题是绑定到并发修改。在此响应的示例中，如果您尝试使用 index() 函数，它将不起作用，因为每次删除单元格时单元格索引都会发生变化。一种解决方案是在要删除的单元格上使用 hide() 函数。但是如果你真的需要删除列（从 DOM 中删除它），对我来说有效的方法是使用 javascript native 删除列。

$(function() {      
    $('table tr').each(function(e, row) {
    var i = 0;
    $(row).find('td, th').each(function(e, cell) {          
        if (i == 1)  { 
           row.removeChild(cell);  
        }   
        i++;                    
    });
});

在本例中，您删除表的第二列：i == 1 ...

【讨论】：

【解决方案3】：

我知道这个话题很老，但我认为最简单的方法就是放：$(".delete").remove();

拥抱。

扎诺多

【讨论】：

【解决方案4】：

试试这个，我得到了确切的输出

var colnum = $(e.target).closest("td").length;
$(e.target).closest("table").find("tr").each(function(){ 
$(this).find("td:eq(" + colnum + ")").remove()});

【讨论】：

$(e.target) 从何而来？我无法让它工作。也许 jsfiddle 会有所帮助？

【解决方案5】：

几年后，可能是时候更新这个问题的答案了。

// Listen for clicks on table originating from .delete element(s)
$("table").on("click", ".delete", function ( event ) {
    // Get index of parent TD among its siblings (add one for nth-child)
    var ndx = $(this).parent().index() + 1;
    // Find all TD elements with the same index
    $("td", event.delegateTarget).remove(":nth-child(" + ndx + ")");
});

【讨论】：

删除行，不删除列
工作，是的。不过可以清理一下:)
喜欢有趣的部分！在 .animate({width: "0"} 之前添加 .css("white-space", "nowrap") 会很好
蒂姆，在我自己的个人副本中，我做到了。但是没贴过去：）绝对让动画更流畅。
我现在已经测试了新方法，在我删除每一列之后，它会留下一个有边框的空，并且当我删除它们时它会从一列到另一列增长..有什么想法吗？

【解决方案6】：

这个老话题在谷歌上名列前茅，但给出的答案很差。浪费了很长时间来完成这项工作，但简单的解决方案就在这里

http://www.devcurry.com/2009/07/hide-table-column-with-single-line-of.html

  $(document).ready(function() {
        $('#btnHide').click(function() {
            $('td:nth-child(2)').hide();
            // if your table has header(th), use this
            //$('td:nth-child(2),th:nth-child(2)').hide();
        });
    });

【讨论】：

【解决方案7】：

@Jonathan Sampson 的回答，我修改了代码来处理包含 <thead> 元素的表格标记并提供一个很好的淡入淡出效果：

$(document).ready(function(){
    $("a.delete").live("click", function(){
    /* Better index-calculation from @activa */
    var myIndex = $(this).closest("th").prevAll("th").length;
    $(this).parents("table").find("tr").each(function(){
      $(this).find("td:eq("+myIndex+"), th:eq("+myIndex+")").fadeOut('slow', function() {
        $(this).remove();
        fixTitles();
      });
    });
  });
});
function fixTitles() {
  $("tr:eq(0) td").each(function(a){
    $(this).html("<a href='#' class='delete'>Delete Row</a> COL " + (a+1));
  });
}

【讨论】：

【解决方案8】：

我不太喜欢这篇文章中的任何解决方案，所以我想出了自己的解决方案。理想情况下，需要的是 :nth-of-type 选择器，这会使事情变得更容易。但不幸的是，JQuery 不支持它“由于它们缺乏实际用途”。嗯。。

所以这是我的解决方案，它使用 :nth-child 表达式来解决问题：

$("a.delete").click(function(event) {
   event.preventDefault();

   var current_cell = $(this).closest("td");
   var nb_columns = current_cell.closest('table').find('tr:eq(1) td').length+1;
   var column_to_delete = current_cell.prevAll("td").length+1;

   $('table tr td:nth-child('+(nb_columns+'n-'+(nb_columns-column_to_delete))+')').remove();
});

【讨论】：

【解决方案9】：

试试这个：

    $("a.delete").click(function(){
        var td=$(this).parent();
        var col=$(td).text();
        col=col.substring(col.length-2)*1;
        var f="td:nth-child("+col+")";
        var tbl=$(td).parent().parent();

        $(tbl).find("tr").each(function(){
            $(this).find(f).hide();
        });

在 FF3.5 中测试。

虽然获取列号有一个问题。如果列数超过 2 位，它将不起作用。如果您放置自定义属性并将其分配到列的位置会更好。

   <a class="delete" href="#" col="2">...</a>

记住第 n 个子索引从 1 开始

【讨论】：

【解决方案10】：

jQuery:

   $('.delete').click(function() {
       var colNumber = $(this).parents().find('td').attr('col');
       $('td[col='+colNumber+']').remove();
       return false;
    });

HTML：

<table border="1">
    <tbody>
    <tr>
                <td col='1'><a href="#" class="delete">DELETE COL</a>COL 1</td>
                <td col='2'><a href="#" class="delete">DELETE COL</a>COL 2</td>
            <td col='3'><a href="#" class="delete">DELETE COL</a>COL 3</td>
            <td col='4'><a href="#" class="delete">DELETE COL</a>COL 4</td>
            <td col='5'><a href="#" class="delete">DELETE COL</a>COL 5</td>
            <td col='6'><a href="#" class="delete">DELETE COL</a>COL 6</td>
        </tr>
        <tr>
                <td col='1'>ROW 1</td>
                <td col='2'>ROW 1</td>
            <td col='3'>ROW 1</td>
            <td col='4'>ROW 1</td>
            <td col='5'>ROW 1</td>
            <td col='6'>ROW 1</td>
        </tr>
        <tr>
                <td col='1'>ROW 2</td>
                <td col='2'>ROW 2</td>
            <td col='3'>ROW 2</td>
            <td col='4'>ROW 2</td>
            <td col='5'>ROW 2</td>
            <td col='6'>ROW 2</td>
        </tr>
    </tbody>
</table>

【讨论】：

【解决方案11】：

这就是我的做法。

为列中的每个单元格分配相同的类名。然后使用 jQuery，删除所有具有该类名的标签。

【讨论】：