Question

我有一个像这样的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>

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

Answer 1

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

// 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 + ")");
});

Answer 2

通用方式（未经测试）：

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

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

无需更改标记。

Answer 3

我就是这样做的。

为列中的每个单元格指定相同的类名。然后使用jQuery删除所有具有该类名的标记。

Answer 4

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

Answer 5

这个老话题在google中排名第一，但答案非常糟糕。浪费了很长时间才能完成这项工作，但简单的解决方案就是这里的例子

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

Answer 6

我真的不喜欢这篇文章的任何解决方案，所以我想出了自己的解决方案。理想的是需要的是：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();
});

Answer 7

我知道主题已经过时了，但我认为最简单的方法就是：$（“。delete”）。remove（）;

拥抱。

Zanoldor

Answer 8

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>

Answer 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>

请记住，nth-child索引从1开始

Answer 10

试试这个，我得到了确切的结果

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

Answer 11

当我读到这篇文章时，我尝试了第一个使用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 ...

jQuery删除HTML表列

11 个答案: