jQuery supprimer HTML colonne de table

J'ai un tableau HTML comme ceci:

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

J'ai besoin d'une fonction pour supprimer la colonne spécifiée lorsque je clique sur le lien avec la classe "supprimer". Pouvez-vous aider ?

InformationsquelleAutor Manny Calavera | 2009-07-01

html-table jquery

50

Après quelques années, il est probablement temps de mettre à jour la réponse à cette 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 + ")");
});
```
- Cette suppression de la ligne, ne pas supprimer la colonne
- Non, effectivement, il fonctionne.
- Œuvres, ouais. Peut être nettoyé un peu bien 🙂
- Comme la partie la plus amusante! L'ajout d'un .css("white-space", "nowrap") avant de l' .animate({width: "0"} serait sympa
- Tim, dans mon propre exemplaire que j'ai fait. Mais ne pas le coller sur 🙂 Certainement rendre l'animation plus fluide.
- Je vous remercie. C'est agréable.
- J'ai testé la nouvelle méthode dès maintenant et après chaque colonne je l'ai enlever, il laisse un vide <tr> il n'y a de frontière et il se développe à partir d'une colonne à l'autre comme je l'ai enlever.. des idées ?
- Vous voulez dire que si vous supprimez toutes les colonnes?
- Une solution rapide serait de supprimer tous les TR a n TD
- Comment dois-je procéder ? =/
- $("tr:vide").remove(); devrait faire l'affaire.
- En fait, je pense qu'il laisse la frontière de chaque <td> .. regardez cette capture d'écran: img509.imageshack.us/img509/124/tdborder.jpg Qu'en pensez-vous ? Merci.
- Passons sur le fait... C'était de la table cellpadding/cellspacing... j'ai mis à 0 dès le début... n'Importe quelle autre solution ?
- Beaucoup, avez-vous installé firebug? Si oui, veuillez explorer la structure de la table après la suppression d'une ligne. Je suis incapable de reproduire le problème que vous rencontrez.
- Oui, j'ai Firebug. Il n'y a pas de firebug-éléments visibles après le supprimer. Comme vous l'avez vu dans la capture d'écran, la frontière plutôt unit-il. Avec border=1 et cellpadding=0, cellspacing=0 ce problème n'est pas présent... je ne sais pas.. Cela n'arrive que dans FireFox. Dans IE7, il n'apparaît pas..
- Très étrange en effet.
- Qu'advient-il si vous avez style="border-collapse:collapse;" sur la table et de la td?
- La frontière est mince, mais il en reste encore après la supprimer... je veux dire, même problème, seulement plus mince... C'est ok, bien, vous avez contribué à déjà assez. Ce n'est pas vraiment un GROS problème. Je vais laisser la cellpadding/espacement de 0 et de traiter avec elle. Merci beaucoup!
- Désolé, l'homme. Je souhaite que nous pourrions avoir résolu. Le meilleur de la chance.
- J'ai été à la recherche pour certains de colonne de table de manipulation avec jQuery et j'ai trouvé beaucoup de grand enseignement de code sur les sélecteurs jQuery et DOM fonctions de navigation. +1 pour moi, bien sûr.
InformationsquelleAutor Sampson
17

Façon générique (pas testé):
```
$("a.delete").click(function() {
   var colnum = $(this).closest("td").prevAll("td").length;

   $(this).closest("table").find("tr").find("td:eq(" + colnum + ")").remove();
}
```
Pas besoin de changer de balisage.
- Ce qui est très cool.
- Excellent indice de calcul de concept. +1
- Pour obtenir que cela fonctionne pour moi, j'avais besoin de faire $(this).la plus proche("table").find("tr").find("td:eq(" + colnum + ")").remove();
InformationsquelleAutor Philippe Leybaert
12

C'est comment j'allais le faire.

Attribuer à chaque cellule dans une colonne avec le même nom de classe. Puis avec jQuery, de supprimer toutes les balises qui ont un nom de classe.

InformationsquelleAutor Daniel A. White

@Jonathan Sampson réponse, j'ai modifié le code pour gérer le tableau de balisage contenant un <thead> élément et de fournir un joli effet de fondu:

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

InformationsquelleAutor chromaloop

Ce vieux topic est arrivé en tête dans google, mais donne une très mauvaise réponses. Gaspillé longtemps pour faire ce travail, mais la solution de facilité serait ici par exemple

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

InformationsquelleAutor nonamenoa

1

Je n'ai pas vraiment comme l'une des solutions de ce post, alors je suis venu avec mon propre.
Idéalement ce qu'il est :nth-of-type de sélecteur qui rendrait les choses plus facile.
Mais, malheureusement, JQuery ne le supporte pas "à cause de leur manque de monde réel utilité". Ehh..

Voici donc ma solution qui fait le truc à l'aide de :nth-child expression:
```
$("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();
});
```
InformationsquelleAutor Pavel Dubinin
1

Je sais que le sujet est vieux, mais je pense que le plus simple c'est de mettre: $(".supprimer").remove();

câlins.

Zanoldor

InformationsquelleAutor Zanoldor

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>

InformationsquelleAutor Daniel Moura

Essayez ceci:

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

Testé dans FF3.5.

il y a une inquiétude, mais obtenir le numéro de colonne. Si le nombre de colonnes dépassent 2 chiffres, cela ne fonctionnera pas. Il serait mieux si vous mettez l'attribut personnalisé et l'affecter la position de la colonne.

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

souviens avec nth-child index commence à 1

InformationsquelleAutor TheVillageIdiot

0

Essayer ça, j'ai eu exactement hors mis
```
var colnum = $(e.target).closest("td").length;
$(e.target).closest("table").find("tr").each(function(){ 
$(this).find("td:eq(" + colnum + ")").remove()});
```
- Où $e.cible) vient-il? Je n'ai pu obtenir que cela fonctionne. Peut-être un jsfiddle aiderait?
- Lire ce tutoriel api.jquery.com/event.target
InformationsquelleAutor Naveenbos
0

Quand j'ai lu ce post j'ai essayé la première solution à l'aide de jQuery fonction de suppression.
Mais il semble avoir un problème avec cette fonction lorsque vous l'utilisez sur une ligne du tableau pour supprimer des cellules. Le problème est lier à un concurrent à la modification. Dans l'exemple avec cette reponse si vous essayez d'utiliser la fonction index (), cela ne fonctionnera pas car la cellule de l'indice est en train de changer chaque fois que vous retirez une cellule.
Une solution pourrait être d'utiliser le cacher() la fonction sur la cellule que vous souhaitez supprimer.
Mais si vous avez vraiment besoin de supprimer la colonne (le retirer dans les DOM) de la manière qui a travaillé pour moi ont été, pour utiliser le javascript natif pour supprimer la colonne.
```
$(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++;                    
    });
});
```
Dans cet exemple, vous supprimez la seconde colonne du tableau : i == 1 ...

InformationsquelleAutor websoft102030

Vous devez vous connecter pour publier un commentaire.