jQuery eliminar columna de la tabla HTML

Question

Tengo una tabla HTML así:

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

Necesito una función para eliminar la columna especificada cuando hago clic en el enlace con la clase "eliminar". Puede usted ayudar ?

Answer 1

Después de unos años, es probable que sea hora de actualizar la respuesta a esta pregunta.

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

Así es como lo haría.

Asigne cada celda en una columna con el mismo nombre de clase. Luego, con jQuery, elimine todas las etiquetas que tengan ese nombre de clase.

Answer 3

Una forma genérica (no probado):

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

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

No hay necesidad de cambiar de marcas.

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

Prueba esto:

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

Probado en FF3.5.

existe una preocupación al obtener el número de columna. Si el número de columnas excede los 2 dígitos, no funcionará. Sería mejor si coloca un atributo personalizado y le asigna la posición de la columna.

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

recordar con el índice nth-child comienza a las 1

Answer 6

realmente no me gusta ninguna de las soluciones de este post, por lo que me ocurrió con mi propia. Idealmente, lo que se necesita es un selector n-ésimo que facilite las cosas. Pero lamentablemente JQuery no lo admite "debido a su falta de utilidad en el mundo real". Ehh ..

Así que aquí está mi solución que hace el truco usando: expresión 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(); 
}); 

Answer 7

respuesta de

@ Jonathan Sampson, que modificó el código para manejar etiquetado de la tabla que contiene un elemento <thead> y proporcionar un buen efecto de desvanecimiento:

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

Este viejo tema fue el primero en google pero da respuestas muy pobres. Desperdiciado mucho tiempo para hacer este trabajo, pero la solución fácil sería aquí, por ejemplo

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

probar esto, me dieron la salida exacta puso

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

Answer 10

Sé que el tema es viejo pero creo que la forma más sencilla es ponerlo: $ (". delete").retirar();

abrazos.

Zanoldor

Answer 11

Cuando he leído este post probé la primera solución usando la función de eliminación de jQuery. Pero parece tener un problema con esta función cuando se usa en una fila de tabla para eliminar la celda. El problema está ligado a una modificación simultánea. En el ejemplo con esta respuesta, si intenta utilizar la función index() no funcionará porque el índice de celda está cambiando cada vez que elimina una celda. Una solución podría ser utilizar la función hide() en la celda que desea eliminar. Pero si realmente necesita eliminar la columna (eliminarla del DOM) la manera que me ha funcionado es utilizar el JavaScript nativo para eliminar la columna.

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

En este ejemplo se elimina la segunda columna de la tabla: i == 1 ...