jQuery删除HTML表列
我有一个像这样的HTML表：
DELETE ROWCOL 1 DELETE COLCOL 2 DELETE COLCOL 3 DELETE COLCOL 4 DELETE COLCOL 5 DELETE COLCOL 6 ROW 1 ROW 1 ROW 1 ROW 1 ROW 1 ROW 1 ROW 2 ROW 2 ROW 2 ROW 2 ROW 2 ROW 2
当我点击“删除”类的链接时，我需要一个函数来删除指定的列。 你能帮我吗 ？
几年之后，现在可能是时候更新这个问题的答案了。
// 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 + ")"); });
通用方式（未测试）：
$("a.delete").click(function() { var colnum = $(this).closest("td").prevAll("td").length; $(this).closest("table").find("tr").find("td:eq(" + colnum + ")").remove(); }
无需更改标记。
我就是这样做的。
为具有相同类名的列中的每个单元格分配。 然后使用jQuery删除具有该类名的所有标记。
这个老话题在谷歌中排名第一，但答案非常糟糕。 浪费了很长时间才能完成这项工作，但简单的解决方案就是在这里举例
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(); }); });
我真的不喜欢这篇文章的任何解决方案，所以我想出了自己的解决方案。 理想的是需要的是：nth-of-type选择器可以让事情变得更容易。 但不幸的是，由于缺乏实际用途，JQuery不支持它。 EHH ..
所以这是我的解决方案，使用：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(); });
@Jonathan Sampson的回答，我修改了代码来处理包含
元素的表标记并提供了一个很好的淡入淡出效果：
$(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("Delete Row COL " + (a+1)); }); }
我知道这个话题很老但我认为最简单的方法就是放：$（“。delete”）。remove（）;
拥抱。
Zanoldor
jQuery的：
$('.delete').click(function() { var colNumber = $(this).parents().find('td').attr('col'); $('td[col='+colNumber+']').remove(); return false; });
HTML：
DELETE COLCOL 1 DELETE COLCOL 2 DELETE COLCOL 3 DELETE COLCOL 4 DELETE COLCOL 5 DELETE COLCOL 6 ROW 1 ROW 1 ROW 1 ROW 1 ROW 1 ROW 1 ROW 2 ROW 2 ROW 2 ROW 2 ROW 2 ROW 2
试试这个：
$("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位数则不起作用。 如果你放置自定义属性并为其指定列位置会更好。
...
请记住，nth-child索引从1开始
试试这个，我得到了确切的结果
var colnum = $(e.target).closest("td").length; $(e.target).closest("table").find("tr").each(function(){ $(this).find("td:eq(" + colnum + ")").remove()});
当我读到这篇文章时，我尝试了第一个使用jQuery删除function的解决方案。 但是在表行上使用它来删除单元格时，这个函数似乎有问题。 问题是绑定到并发修改。 在这个响应的例子中，如果你尝试使用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 …