2010-12-28 155 views
5

Tengo una tabla y no puede cambiar de marcas:jQuery eliminar columna de la tabla

<table> 
    <thead> 
     <tr> 
      <th> 
       blablabla 
      </th> 
      <th> 
       blablabla 
      </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td> 
       efgd 
      </td> 
      <td> 
       efghdh 
      </td> 
     </tr> 
    </tbody> 
</table> 

Aquí es mi función, que debe eliminar una columna. Se llama al hacer clic en la celda:

function (menuItem, menu) { 
    var colnum = $(this).prevAll("td").length; 

    $(this).closest('table').find('thead tr th:eq('+colnum+')').remove(); 
    $(this).closest("table").find('tbody tr td:eq('+colnum+')').remove();  
    return; 
} 

Pero elimina algo más, no la columna que quería eliminar. ¿Dónde estoy equivocado?

+0

No puedo ver su intención aquí, por favor brinde más especificaciones ific. ¿Quieres eliminar todo o solo columnas específicas? –

Respuesta

12

Una columna es prácticamente solo celdas, por lo que deberá pasar manualmente por todas las filas y eliminar la celda por índice.

Esto debe darle un buen punto de partida para la eliminación de la tercera columna:

$("tr").each(function() { 
    $(this).filter("td:eq(2)").remove(); 
}); 
+0

Esto no funciona del todo. 'filter()' se aplica a los elementos 'tr', no a los elementos' td', por lo que no elimina nada. En su lugar, debe hacer '$ (this) .children(). Filter()' o mejor '$ (this) .find()'. – Mike

7

Este utiliza .delegate() para el controlador, y un enfoque más nativa utilizando cellIndex para obtener el índice de células que se hizo clic, y cells para tirar de la celda de cada fila.

Ejemplo:http://jsfiddle.net/zZDKg/1/

$('table').delegate('td,th', 'click', function() { 
    var index = this.cellIndex; 
    $(this).closest('table').find('tr').each(function() { 
     this.removeChild(this.cells[ index ]); 
    }); 
}); 
5

Esto funciona muy bien para mí:

$(".tableClassName tbody tr").each(function() { 
    $(this).find("td:eq(3)").remove(); 
}); 
0

Retire la primera columna de cada fila.

$('.mytable').find("tr td:nth-child(1)").each(function(){ 
    $(this).remove() 
}); 
1

Si usted tiene el HTML estático (considerar en la tabla con 10 columnas),

a continuación, quitar la primera columna, junto con cabecera mediante el siguiente:

$('#table th:nth-child(1),#table td:nth-child(1)').remove(); 

ahora la nueva tabla tendrá 9 columnas, ahora puede eliminar cualquier columna usando el número:

$('#table th:nth-child(7),#table td:nth-child(7)').remove(); 
Cuestiones relacionadas