jQuery rimuovere colonna della tabella HTML

Question

Ho una tabella HTML come questo:

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

Ho bisogno di una funzione per rimuovere la colonna specificata quando clicco sul link con la classe "delete". Puoi aiutare ?

Answer 1

Dopo alcuni anni, è probabilmente ora di aggiornare la risposta a questa domanda.

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

Ecco come lo farei.

Assegnare ogni cella in una colonna con lo stesso nome di classe. Quindi con jQuery, rimuovere tutti i tag che hanno quel nome di classe.

Answer 3

Un modo generico (non testato):

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

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

Non c'è bisogno di cambiare markup.

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

Prova questa:

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

Testato in FF3.5.

c'è una preoccupazione però ottenere il numero di colonna. Se il numero di colonne supera le 2 cifre, non funzionerà. Sarebbe meglio se si inserisse un attributo personalizzato e si assegnasse la posizione della colonna.

<a class="delete" href="#" col="2">...</a> 

ricordare con indice di nth-child dalle ore 1

Answer 6

non ho davvero come una delle soluzioni da questo post, così mi si avvicinò con la mia. In teoria, ciò che è necessario è un selettore di nth-of-type che renderebbe le cose più facili. Ma sfortunatamente JQuery non lo supporta "a causa della loro mancanza di utilità nel mondo reale". Ehh ..

Quindi, ecco la mia soluzione che fa il trucco utilizzando: ennesima espressione-bambino:

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

risposta di

@ Jonathan Sampson, ho modificato il codice per gestire tavolo markup che contiene un elemento <thead> e fornire una bella effetto dissolvenza:

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

Questo vecchio argomento è venuto in cima a google, ma fornisce risposte molto scarse. Sprecato molto tempo per fare questo lavoro, ma la soluzione facile sarebbe qui ad esempio

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

Prova questa, ho ottenuto l'out esatto messo

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

Answer 10

So che l'argomento è vecchio ma penso che il modo più semplice sia appena messo: $ (". delete").rimuovere();

abbracci.

Zanoldor

Answer 11

Quando ho letto questo post ho provato la prima soluzione utilizzando la funzione di rimozione di jQuery. Ma sembra avere un problema con questa funzione quando lo si utilizza su una riga della tabella per eliminare la cella. Il problema è legato a una modifica simultanea. Nell'esempio con questa risposta se si tenta di utilizzare la funzione index() non funzionerà perché l'indice delle celle cambia ogni volta che si rimuove una cella. Una soluzione potrebbe essere quella di utilizzare la funzione hide() sulla cella che si desidera eliminare. Ma se davvero hai bisogno di cancellare la colonna (rimuovila dal DOM) il modo in cui ha funzionato per me è stato usare il javascript nativo per rimuovere la colonna.

$(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 questo esempio si elimina la seconda colonna della tabella: i == 1 ...