jQuery 删除 HTML 表格列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1068881/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery remove HTML table column
提问by Manny Calavera
I have a HTML table like this:
我有一个这样的 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>
I need a function to remove the specified column when I click on the link with the class "delete". Can you help ?
当我单击带有“删除”类的链接时，我需要一个函数来删除指定的列。你能帮我吗 ？
回答by Sampson
After a few years, it's probably time to update the answer on this question.
几年后，可能是时候更新这个问题的答案了。
// 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 + ")");
});
回答by Philippe Leybaert
A generic way (not tested):
通用方式（未测试）：
$("a.delete").click(function() {
var colnum = $(this).closest("td").prevAll("td").length;
$(this).closest("table").find("tr").find("td:eq(" + colnum + ")").remove();
}
No need to change markup.
无需更改标记。
回答by Daniel A. White
This is how I would do it.
这就是我要做的。
Assign each cell in a column with the same class name. Then with jQuery, remove all tags that have that class name.
用相同的类名分配列中的每个单元格。然后使用 jQuery，删除所有具有该类名的标签。
回答by chromaloop
@Jonathan Sampson's answer, I modified the code to handle table markup containing a <thead>element and provide a nice fade effect:
@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));
});
}
回答by nonamenoa
This old topic came top in google but gives very poor answers. Wasted long time for making this work but the easy solution would be here for example
这个古老的话题在谷歌中名列前茅，但给出的答案非常糟糕。浪费了很长时间来完成这项工作，但简单的解决方案将在这里例如
http://www.devcurry.com/2009/07/hide-table-column-with-single-line-of.html
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();
});
});
回答by Zanoldor
I know the topic is old but I think the easiest way is just put: $(".delete").remove();
我知道这个话题很老，但我认为最简单的方法是： $(".delete").remove();
hugs.
拥抱。
Zanoldor
扎诺多
回答by Pavel Dubinin
I didn't really like any of the solutions from this post, so I came up with my own. Idealy what needed is :nth-of-type selector which would make things way easier. But unfortunately JQuery does not support it "due to their lack of real-world usefulness". Ehh..
我不太喜欢这篇文章中的任何解决方案，所以我想出了自己的解决方案。理想情况下需要的是 :nth-of-type 选择器，这将使事情变得更容易。但不幸的是，JQuery 不支持它，“因为它们缺乏现实世界的实用性”。诶..
So here's my solution which does the trick using :nth-child expression:
所以这是我的解决方案，它使用 :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();
});
回答by websoft102030
When I've read this post I tried the first solution using jQuery's remove function. But it seems to have a problem with this function when using it on a table row to delete cell. The problem is bind to a concurrent modification. In the exemple with this reponse if you try to use the index() function it will not work because cell index is changing each time you remove a cell. One solution could be to use the hide() function on the cell you want to delete. But if you really need to delete the column (remove it from the DOM) the way which has worked for me were to use the javascript native to remove the column.
当我阅读这篇文章时，我尝试了第一个使用 jQuery 的 remove 函数的解决方案。但是在表格行上使用它来删除单元格时，这个函数似乎有问题。问题是绑定到并发修改。在此响应的示例中，如果您尝试使用 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++;
});
});
In this example you delete the second column of the table : i == 1 ...
在本例中，您删除表的第二列： i == 1 ...
回答by Naveenbos
Try this, i got the exact out put
试试这个，我得到了确切的输出
var colnum = $(e.target).closest("td").length;
$(e.target).closest("table").find("tr").each(function(){
$(this).find("td:eq(" + colnum + ")").remove()});
回答by Daniel Moura
jQuery:
jQuery：
$('.delete').click(function() {
var colNumber = $(this).parents().find('td').attr('col');
$('td[col='+colNumber+']').remove();
return false;
});
HTML:
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>
