web-dev-qa-db-fra.com

jQuery remove 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 "delete". Pouvez vous aider? 

jqueryhtml-table
23
Manny Calavera

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 + ")");
});
50
Sampson

Une manière générique (non testée):

$("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 le balisage.

16
Philippe Leybaert

Voici comment je le ferais.

Attribuez chaque cellule dans une colonne portant le même nom de classe. Ensuite, avec jQuery, supprimez toutes les balises portant ce nom de classe.

12
Daniel A. White

Cet ancien sujet est arrivé en haut de Google mais donne des réponses très pauvres. Longtemps perdu à faire ce travail, mais la solution facile 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();
        });
    });
2
nonamenoa

Dans la réponse de Jonathan Sampson, j'ai modifié le code pour gérer le balisage de table contenant un élément <thead> et fournir un effet de fondu agréable:

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

Je n’aimais pas vraiment les solutions de ce billet, j’ai donc créé mon propre . Ce qu’il faut faire, c’est: un sélecteur de type de type qui simplifierait les choses beaucoup plus facilement . ne le soutenez pas "en raison de leur manque d’utilité réelle". Ehh .. 

Alors voici ma solution qui fait le tour en utilisant: expression 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();
});
1
Pavel Dubinin

Je sais que le sujet est ancien mais je pense que le moyen le plus simple est simplement de dire: $ (". Delete").

câlins.

Zanoldor

1
Zanoldor

Après avoir lu cet article, j'ai essayé la première solution en utilisant la fonction remove de jQuery. Mais il semble y avoir un problème avec cette fonction lorsqu’on l’utilise sur une ligne de tableau pour supprimer une cellule. Le problème est lié à une modification simultanée. Dans l'exemple avec cette réponse si vous essayez d'utiliser la fonction index (), cela ne fonctionnera pas car l'index de cellule change à chaque fois que vous supprimez une cellule . Une solution pourrait être d'utiliser la fonction hide () de la cellule vouloir supprimer . Mais si vous avez vraiment besoin de supprimer la colonne (supprimez-la du DOM), la méthode qui a fonctionné pour moi consistait à 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 deuxième colonne du tableau: i == 1 ...

0
websoft102030

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>
0
Daniel Moura

Essaye ça:

    $("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é en FF3.5.

il y a une préoccupation bien obtenir le numéro de colonne. Si le nombre de colonnes dépasse 2 chiffres, cela ne fonctionnera pas. Il serait préférable de mettre l'attribut personnalisé et de lui attribuer la position de la colonne.

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

rappelez-vous avec l'index n-enfant commence à 1

0
TheVillageIdiot

Essayez ceci, j'ai le résultat exact

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