11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Supprimer et rétablir des lignes d'un tableau

Bonjour, je bug sur un problème Smiley sweatdrop

J'ai une table, et je veux qu'en cliquant sur un bouton, on puisse supprimer certaines lignes(et afficher que les "bonnes lignes") de ce tableau (et non pas les cacher avec display none, je veux les supprimer ( car j'utilise un plugin de tri par colonne et en cachant les lignes, cela pose des problèmes d'affichage (pas le bon nombre de lignes sur chaque page bref..)).

Ce que j'aimerai: dans chaque tr, j'aurai une classe: du genre "poire, pomme, banane"

Si class= "poire" alors on supprime les lignes correspondantes aux classes pomme et banane (et on rétablit les lignes correspondants aux class poire si elles ont été supprimées).
Si class= "pomme" alors on supprime les lignes correspondantes aux classes poire et banane(..).
Si class= "banane" alors on supprime les lignes correspondantes aux classes poire et pomme(..).
Si class ="défaut" alors on rétablit toutes les lignes.

Donc disons que j'ai 4 boutons poire, pomme, banane et défaut:

Là voici un exemple simple de table: (si je réussi pas sur un exemple simple je n'essaye même pas sur un code plus complexe Smiley confus ) :
http://codepen.io/JUSEN/pen/vGjYRB
(ici j'ai un bouton pour changer de style (n'en tenez pas compte), je veux créer d'autres boutons pour supprimer/ rétablir des lignes) Smiley smile

Faisons un schéma récapitulatif Smiley cligne

upload/61751-rncapitula.png

Merci d'avance Smiley prie
Modifié par Xan (03 May 2016 - 13:55)
Bonjour !

Je n'ai pas trop l'habitude de manipuler les lignes d'un tableau mais il existe deux méthodes en Javascript pour insérer ou supprimer une ligne : insertRow() et deleteRow()...

Smiley smile
Bonjour,

Le soucis dans ton histoire de supprimer des lignes, c'est de pouvoir les faire réapparaître, donc la solution consiste à garder un template dans un coin du code.

En jQuery, un plugin pourrait avoir cette gueule là :
$.fn.filtre = function(){

  this.each(function(){
    init( $(this) )
  })

  function init($el){
    var $clone = $el.clone()
    $clone.attr('id', '').removeClass().css({'display':'none'}).appendTo('body')
    
    events($el, $clone)
  }

  function events($el, $clone){
    $('button[data-filtre]').click(function(){
      var filtre = $(this).data('filtre')=='tout' ? '' : '.'+$(this).data('filtre') ,
          $tmp;
      $tmp = $clone.find('tbody tr'+filtre).clone()
      $el.children('tbody').empty().append( $tmp )
    })
  }

  return this;
}


Ici un test de de ce plugin sur deux tableaux (mais c'est optionnel)
Modifié par SolidSnake (03 May 2016 - 13:57)
Je pense que plutôt que "supprimer/rétablir" il doit s'agir de "cacher/montrer".
Si c'est le cas, c'est assez facile à faire en CSS et un peu de JS:
1) tu mets toute la table dans une <div>
2) quand tu appuies sur un bouton, ça lance un script JS qui met la classe de la <div> à la bonne valeur: 
div.className = "...";

3) dans le CSS, tu rends les lignes de la table visibles ou non selon le contexte.

Pas le temps de faire un exemple tout de suite, désolé.
PapyJP a écrit :
Je pense que plutôt que "supprimer/rétablir" il doit s'agir de "cacher/montrer".

Il est précisé que non...
SolidSnake a écrit :
Bonjour,

Le soucis dans ton histoire de supprimer des lignes, mais de pourvoir les faire réapparaître, donc la solution consiste à garder un template dans un coin du code.

En jQuery, un plugin pourrait avoir cette gueule là :
$.fn.filtre = function(){

  this.each(function(){
    init( $(this) )
  })

  function init($el){
    var $clone = $el.clone()
    $clone.attr('id', '').removeClass().css({'display':'none'}).appendTo('body')
    
    events($el, $clone)
  }

  function events($el, $clone){
    $('button[data-filtre]').click(function(){
      var filtre = $(this).data('filtre')=='tout' ? '' : '.'+$(this).data('filtre') ,
          $tmp;
      $tmp = $clone.find('tbody tr'+filtre).clone()
      $el.children('tbody').empty().append( $tmp )
    })
  }

  return this;
}


Ici un test de de ce plugin sur deux tableaux (mais c'est optionnel)




Merci de ta réponse avec le code et tout c'est tout à fait ça Smiley prie
Je n'aurai jamais pensé à faire tout comme ça, ca me sauve Smiley jap
PapyJP a écrit :
Je pense que plutôt que "supprimer/rétablir" il doit s'agir de "cacher/montrer".
Si c'est le cas, c'est assez facile à faire en CSS et un peu de JS:
1) tu mets toute la table dans une &lt;div&gt;
2) quand tu appuies sur un bouton, ça lance un script JS qui met la classe de la &lt;div&gt; à la bonne valeur: 
div.className = "...";

3) dans le CSS, tu rends les lignes de la table visibles ou non selon le contexte.

Pas le temps de faire un exemple tout de suite, désolé.


Merci aussi de ta réponse, mais oui je devais supprimer et non cacher à cause d'un plugin qui en cachant n'affichait plus le même nombre de ligne par page (dans mon tableau j'ai une centaine de lignes, 10 lignes par pages précisément) Smiley jap
Modifié par Xan (03 May 2016 - 14:02)
Xan a écrit :
Je n'aurai jamais pensé à faire tout comme ça, ca me sauve Smiley jap

Pourquoi, ils allaient tuer tes enfants si tu ne leur livrais pas le code ? Smiley lol

Content d'avoir pu t'aider, n'oublie pas de passer le topic en résolu si c'est le cas. Smiley cligne

EDIT :
PapyJP a écrit :
Je pense que plutôt que "supprimer/rétablir" il doit s'agir de "cacher/montrer".

Ç'eût été trop simple ! Smiley langue
Modifié par SolidSnake (03 May 2016 - 13:58)
SolidSnake a écrit :

Pourquoi, ils allaient tuer tes enfants si tu ne leur livrais le code ? Smiley lol

Content d'avoir pu t'aider, n'oublie pas de passer le topic en résolu si c'est le cas. Smiley cligne


C'est pas impossible Smiley lol

C'est mis, encore merci Smiley jap
Sujet clos
Aller à