jPosition masquée \ affiche les lignes de la table via l'attribut de données

J'ai une table, #thetable qui contient des lignes d'une base de données. Au-dessus de la table, j'ai un button 'diesel' que je veux lorsque vous cliquez pour masquer ou afficher les lignes dont les attributs de données sont diesel, donc chaque ligne a un data-attribute qui est soit diesel ou petrol. Cependant quand je clique dessus les lignes pour ne pas disparaître.jPosition masquée affiche les lignes de la table via l'attribut de données

L'aide serait grandement appréciée.

function clickDiesel() { 
 
    $("tr[data-fuel=diesel]").css('visibility', 'hidden'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" class="btn btn-default" style="margin-right: 1em" onclick="clickDiesel()"> 
 
    diesel 
 
    <span style="color: Green"> 
 
    <i class="fa fa-check"></i> 
 
    </span> 
 
</button> 
 

 
<table id="thetable"> 
 
    <tr data-fuel="diesel"> 
 
    <td>diesel</td> 
 
    </tr> 
 
    <tr data-fuel="petrol"> 
 
    <td>petrol</td> 
 
    </tr> 
 
</table>

Source

2017-08-31 Jim

J'ai placé votre code dans un extrait exécutable où il semble fonctionner correctement. Pourriez-vous s'il vous plaît vérifier la console pour des erreurs ailleurs dans votre code. Aussi - est-ce que les données de la table sont ajoutées à la page * après le chargement de la page? Via AJAX par exemple. Aussi, en aparté, je suggérerais de supprimer l'attribut d'événement 'on *' obsolète et d'attacher vos gestionnaires d'événements via JS discret à la place. –

Essayez '.hide()' au lieu de changer la visibilité. La visibilité cachée prend toujours le même espace lors du rendu et cela peut être la cause du problème de "ne pas disparaître". –

Super qui fonctionne parfaitement et j'ai utilisé .hide(). – Jim

essayer avec

<script> 
function clickDiesel() 
{ 
    $("tr[data-fuel='diesel']").css('visibility', 'hidden'); 
} 
</script>

Source

2017-08-31 08:44:13 filo

https://meta.stackoverflow.com/questions/300837/what-comment-should-i-add-to-code-only-answers –

Je l'ai essayé mais ils ne disparaissent pas – Jim

Ajouter un identifiant au bouton, par exemple:

<button type="button" id="hideRowBtn" class="btn btn-default" style="margin-right: 1em"> 
    diesel 
    <span style="color: Green"> 
    <i class="fa fa-check"></i> 
    </span> 
</button>

Puis dans la tête de votre site ajouter ceci:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#hideRowBtn').on('click', function() { 
       $("tr[data-fuel='diesel']").hide(); 
     }); 
    }); 
</script>

Source

2017-08-31 09:13:53 Isma

jPosition masquée \ affiche les lignes de la table via l'attribut de données

Répondre

Questions connexes