Afficher/masquer les lignes d'un tableau à l'aide de classes Javascript
J'ai une table qui se dilate et se rétracte, mais elle devient trop compliquée pour l'utiliser et IE et Firefox ne fonctionnent pas correctement avec cette table.
Alors, voici le code JavaScript:
function toggle_it(itemID){
// Toggle visibility between none and ''
if ((document.getElementById(itemID).style.display == 'none')) {
document.getElementById(itemID).style.display = ''
event.preventDefault()
} else {
document.getElementById(itemID).style.display = 'none';
event.preventDefault()
}
}
Et un exemple HTML:
<table>
<tr>
<td>Product</td>
<td>Price</td>
<td>Destination</td>
<td>Updated on</td>
</tr>
<tr>
<td>Oranges</td>
<td>100</td>
<td><a href="#" id="toggle" onClick="toggle_it('tr1');toggle_it('tr2')">+ On Store</a></td>
<td>22/10</td>
</tr>
<tr id="tr1" style="display:none">
<td></td>
<td>120</td>
<td>City 1</td>
<td>22/10</td>
</tr>
<tr id="tr2" style="display:none">
<td></td>
<td>140</td>
<td>City 2</td>
<td>22/10</td>
</tr>
<tr>
<td>Apples</td>
<td>100</td>
<td><a href="#" id="toggle" onClick="toggle_it('tr3');toggle_it('tr4')">+ On Store</a></td>
<td>22/10</td>
</tr>
<tr id="tr3" style="display:none">
<td></td>
<td>120</td>
<td>City 1</td>
<td>22/10</td>
</tr>
<tr id="tr4" style="display:none">
<td></td>
<td>140</td>
<td>City 2</td>
<td>22/10</td>
</tr>
</table>
Le problème, c’est que j’utilise un identifiant pour chacun d’eux et c’est très ennuyeux car je veux avoir beaucoup de lignes cachées pour chaque parent et beaucoup de parents, donc c’est trop nombreux à gérer. Et IE et FireFox affichent uniquement la première ligne cachée et non les autres. Je suppose que cela se produit car j'ai réussi à faire fonctionner tous les identifiants ensemble ..__ Je pense qu'il serait préférable que j'utilise Classes plutôt que des identifiants pour indétifier les lignes cachées.
Je suis vraiment novice dans ce domaine, alors essayez de l'expliquer simplement. Aussi, j'ai essayé jQuery mais je n'ai pas réussi à l'obtenir.
Il est difficile de comprendre ce que vous essayez de faire avec cet échantillon, mais vous êtes en train de penser à utiliser des classes. J'ai créé un JSFiddle pour aider à démontrer une manière légèrement meilleure (j'espère) de le faire.
Voici le violon: link .
Au lieu de travailler avec des identifiants, vous travaillez avec des classes. Dans votre exemple de code, il y a des oranges et des pommes. Je les traite comme des catégories de produits (car je ne sais pas vraiment quel est votre but), avec leurs propres identifiants. Donc, je marque le produit <tr>s avec class="cat1" ou class="cat2".
Je marque également les liens avec une simple classe .toggler. Ce n'est pas une bonne pratique d'avoir des attributs onclick sur les éléments eux-mêmes. Vous devez "lier" les événements lors du chargement de la page à l'aide de JavaScript. Je le fais en utilisant jQuery.
$(".toggler").click(function(e){
// you handle the event here
});
Avec ce format, vous liez un gestionnaire d'événement à l'événement click des liens avec la classe toggler. Dans mon code, j'ajoute un attribut data-prod-cat aux liens toggler pour spécifier les lignes de produits à contrôler. (La raison de mon utilisation d'un attribut data-* est expliquée ici . Vous pouvez utiliser Google "attributs de données html5" pour plus d'informations.)
Dans le gestionnaire d'événements, je fais ceci:
$('.cat'+$(this).attr('data-prod-cat')).toggle();
Avec ce code, j'essaie en fait de créer un sélecteur tel que $('.cat1') afin de pouvoir sélectionner des lignes pour une catégorie de produit spécifique et modifier leur visibilité. J'utilise $(this).attr('data-prod-cat') this pour accéder à l'attribut data-prod-cat du lien sur lequel l'utilisateur clique. J'utilise jQuery toggle , de sorte que je n'ai pas à écrire une logique telle que if visible, then hide element, else make it visible comme vous le faites dans votre code JS. jQuery traite de cela. La fonction bascule fait ce qu'elle dit et toggles la visibilité du ou des éléments spécifiés.
J'espère que c'était assez explicatif.
Une façon de le faire serait de simplement mettre une classe sur les lignes "parent" et de supprimer tous les identifiants et attributs onclick en ligne:
<table id="products">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Destination</th>
<th>Updated on</th>
</tr>
</thead>
<tbody>
<tr class="parent">
<td>Oranges</td>
<td>100</td>
<td><a href="#">+ On Store</a></td>
<td>22/10</td>
</tr>
<tr>
<td></td>
<td>120</td>
<td>City 1</td>
<td>22/10</td>
</tr>
<tr>
<td></td>
<td>140</td>
<td>City 2</td>
<td>22/10</td>
</tr>
...etc.
</tbody>
</table>
Et puis avoir un CSS qui cache tous les non-parents:
tbody tr {
display : none; // default is hidden
}
tr.parent {
display : table-row; // parents are shown
}
tr.open {
display : table-row; // class to be given to "open" child rows
}
Cela simplifie grandement votre langage HTML. Notez que j'ai ajouté <thead> et <tbody> à votre balisage pour faciliter le masquage des lignes de données et leur ignorance.
Avec jQuery, vous pouvez simplement faire ceci:
// when an anchor in the table is clicked
$("#products").on("click","a",function(e) {
// prevent default behaviour
e.preventDefault();
// find all the following TR elements up to the next "parent"
// and toggle their "open" class
$(this).closest("tr").nextUntil(".parent").toggleClass("open");
});
Démo: http://jsfiddle.net/CBLWS/1/
Ou, pour implémenter quelque chose comme ça en JavaScript, peut-être quelque chose comme ce qui suit:
document.getElementById("products").addEventListener("click", function(e) {
// if clicked item is an anchor
if (e.target.tagName === "A") {
e.preventDefault();
// get reference to anchor's parent TR
var row = e.target.parentNode.parentNode;
// loop through all of the following TRs until the next parent is found
while ((row = nextTr(row)) && !/\bparent\b/.test(row.className))
toggle_it(row);
}
});
function nextTr(row) {
// find next sibling that is an element (skip text nodes, etc.)
while ((row = row.nextSibling) && row.nodeType != 1);
return row;
}
function toggle_it(item){
if (/\bopen\b/.test(item.className)) // if item already has the class
item.className = item.className.replace(/\bopen\b/," "); // remove it
else // otherwise
item.className += " open"; // add it
}
Démo: http://jsfiddle.net/CBLWS/
Quoi qu'il en soit, placez le code JavaScript dans un élément <script> qui se trouve à la fin du corps afin qu'il s'exécute après l'analyse de la table.
JQuery 10.1.2 a une fonction d’affichage et de masquage de Nice qui encapsule le comportement dont vous parlez. Cela vous éviterait d'avoir à écrire une nouvelle fonction ou à garder une trace des classes css.
$("tr1").show();
$("tr1").hide();
event.preventDefault()
Ne fonctionne pas dans tous les navigateurs. Au lieu de cela, vous pouvez renvoyer false dans l'événement OnClick.
onClick="toggle_it('tr1');toggle_it('tr2'); return false;">
Pas sûr que ce soit la meilleure façon, mais j'ai testé dans IE, FF et Chrome et son bon fonctionnement.
Ci-dessous mon script qui affiche/masque la ligne de table avec l'id "agencyrow".
<script type="text/javascript">
function showhiderow() {
if (document.getElementById("<%=RadioButton1.ClientID %>").checked == true) {
document.getElementById("agencyrow").style.display = '';
} else {
document.getElementById("agencyrow").style.display = 'none';
}
}
</script>
Il suffit d'appeler la fonction showhiderow()upon radiobutton onClick event
Les directives AngularJS ng-show, ng-hide permettent d'afficher et de masquer une ligne:
<tr ng-show="rw.isExpanded">
</tr>
Une ligne est visible lorsque rw.isExpanded == true et masquée lorsque Rw.isExpanded == false . Ng-hide exécute la même tâche mais requiert une condition inverse.