jQuery的删除HTML表列

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

这就是我该怎么做的。

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

Answer 3

一个通用的方法（未测试）：

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

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

无需更换标记。

Answer 4

的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 5

试试这个：

$("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开始

Answer 6

我真的不喜欢任何从这个职位的解决方案，所以我想到了我自己。 Idealy需要什么是：nth类型选择器会让事情变得更容易。 但不幸的是JQuery不支持它“由于缺乏真实世界的有用性”。 EHH ..

因此，这里是我的解决方案，它不会使用的伎俩：第n个孩子表达：

$("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

@Jonathan桑普森的回答，我修改了代码来处理表格标记包含一个<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 8

这个老话题在谷歌的顶部，但给出了很差的答案。浪费很长的时间使这项工作，但最简单的办法会在这里例如

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 9

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

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

Answer 10

我知道这个话题是老但我认为最简单的方法是：$（“。delete”）。去掉（）;

拥抱。

Zanoldor

Answer 11

当我看到这篇文章我试着使用jQuery的删除功能的第一个解决方案。 但是，在表格行上使用它删除单元格时，它似乎有问题。该问题绑定到并发修改。在这个例子中，如果你尝试使用index（）函数，它将无法工作，因为每次删除单元格时，单元格索引都在变化。 一个解决方案可能是在要删除的单元格上使用hide（）函数。 但是，如果你真的需要删除列（从DOM中删除它），那么对我来说工作的方式是使用JavaScript本地删除列。

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

在这个例子中，你删除表的第二列：我== 1 ...