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