11038 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Voilà je suis novice dans le java. Mes connaissances sont très basique.
J'ai réussit a me bricoler le fichier que le souhaite en picorant quelques codes sur la toile.

Je rencontre un soucis, lorsque j'utilise la case "input" pour filtrer mon tableau.
Les résultats sont bon mais l'affichage non.
Je souhaite conserver cette alternance de couleur de fond pour chaque ligne mais je n'y arrive pas. Par exemple si je saisie le mot "auto" les couleurs de fond ne sont pas alternées.
Avez-vous une idée ?

Cordialement
Jérôme

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Services inutiles</title>
<style>
* {font-family: "Fira Sans", sans-serif;}
table {
	border-collapse: collapse;
	background-color: #5d625c;
	margin:auto;
}
th, td {padding: 2px 5px}
thead > tr:nth-child(-n+2) {
	color: white;
	text-align: center;
	background-color: #5d625c;
}
tr:nth-child(odd) {
  background-color: #dddad4;
  border-bottom:1px solid #5d625c;
  color:#444;
}
tr:nth-child(even) {
  background-color: #c6c3bd;
  border-bottom:1px solid #5d625c;
  color:#444;
}
.inpres {background-color: red}
</style>
</head>
<body>

<table class="order-table table tab1">
<thead>
<tr><th colspan="3"><input type="text" class="table-filter" data-table="order-table" placeholder="Item to filter.." />Cliquer pour trier</th></tr>
<tr><th id="a">Nom du service</th><th id="b">Etat</th><th id="c">Démarrage conseillé</th></tr>
</thead>
<tbody id="tbody1">
<tr><td>Accès du périphérique d'interface utilisateur</td><td></td><td>Désactivé</td></tr>
<tr><td>Acquisition d'image Windows (WIA)</td><td></td><td>Manuel</td></tr>
<tr><td>Agent de protection d’accès réseau</td><td></td><td>Désactivé</td></tr>
<tr><td>Agent de stratégie IPsec</td><td>Démarré</td><td>Manuel</td></tr>
<tr><td>Alimentation</td><td>Démarré</td><td>Automatique</td></tr>
<tr><td>Appel de procédure distante (RPC)</td><td>Démarré</td><td>Automatique</td></tr>
<tr><td>Application Host Helper Service</td><td></td><td>Automatique</td></tr>
<tr><td>Application système COM+</td><td></td><td>Manuel</td></tr>
<tr><td>Assistance IP</td><td></td><td>Désactivé</td></tr>
<tr><td>Assistance NetBIOS sur TCP/IP</td><td></td><td>Désactivé</td></tr>
<tr><td>Audio Windows</td><td>Démarré</td><td>Automatique</td></tr>
<tr><td>BranchCache</td><td></td><td>Désactivé</td></tr>
<tr><td>Brillance adaptative</td><td></td><td>Désactivé</td></tr>
<tr><td>Cache de police de Windows Presentation Foundation 3</td><td></td><td>Manuel</td></tr>
<tr><td>Carte à puce</td><td></td><td>Désactivé</td></tr>
<tr><td>Carte de performance WMI</td><td></td><td>Manuel</td></tr>
<tr><td>Centre de sécurité</td><td></td><td>Désactivé</td></tr>
<tr><td>Cliché instantané des volumes</td><td></td><td>Manuel</td></tr>
<tr><td>Client de stratégie de groupe</td><td>Démarré</td><td>Automatique</td></tr>
<tr><td>Client de suivi de lien distribué</td><td></td><td>Désactivé</td></tr>
<tr><td>Client DHCP</td><td>Démarré</td><td>Automatique</td></tr>
<tr><td>Client DNS</td><td>Démarré</td><td>Automatique</td></tr>
<tr><td>Collecteur d’événements de Windows</td><td></td><td>Manuel</td></tr>
<tr><td>Configuration automatique de réseau câblé</td><td></td><td>Manuel</td></tr>
<tr><td>Configuration des services Bureau à distance</td><td></td><td>Désactivé</td></tr>
</tbody>
</table>
</body>
<script>
compare = function(ids, asc){
	return function(row1, row2){
		tdValue = function(row, ids){
			return row.children[ids].textContent;
		}
		tri = function(v1, v2){
			if (v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2)){return v1 - v2}
			else {return v1.toString().localeCompare(v2)}
			return v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2);
		}
		return tri(tdValue(asc ? row1 : row2, ids), tdValue(asc ? row2 : row1, ids));
	}
}
tbody = document.querySelector('#tbody1');
thx = document.querySelectorAll('#a, #b, #c');
trxb = tbody.querySelectorAll('tr');
thx.forEach(function(th){
	th.addEventListener('click', function(){
		let classe = Array.from(trxb).sort(compare(Array.from(thx).indexOf(th), this.asc = !this.asc));
		classe.forEach(function(tr){
			tbody.appendChild(tr)
		});
	})
});
var compt = tbody.querySelectorAll('tr').length + 1;
for (var i = 1; i < compt; i++) {
	ajt = tbody.querySelector('tr:nth-of-type('+i+')').querySelector('td');
	ajt.innerHTML="<input type='checkbox'> " + ajt.innerHTML;
}
(function() {
	'use strict';
	var TableFilter = (function() {
		var Arr = Array.prototype;
		var input;
		function onInputEvent(e) {
			input = e.target;
			var table1 = document.getElementsByClassName(input.getAttribute('data-table'));
			Arr.forEach.call(table1, function(table) {
				Arr.forEach.call(table.tBodies, function(tbody) {
					Arr.forEach.call(tbody.rows, filter);
				});
			});
		}
		function filter(row) {
			var text = row.textContent.toLowerCase();
			var val = input.value.toLowerCase();
			row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
		}
		return {
			init: function() {
				var inputs = document.getElementsByClassName('table-filter');
				Arr.forEach.call(inputs, function(input) {
					input.oninput = onInputEvent;
				});
			}
		};
	})();
TableFilter.init();
})();
</script>
</html>

Modifié par Jerome87 (11 Jan 2021 - 02:56)
Bonjour. Question très intéressante et délicate. Vous ne pouvez pas le faire en CSS pur car les éléments en display:none restent présents dans le DOM et la pseudo classe :nth-child() ne les sautera pas (de même pour :nth-of-type). La solution sera à trouver du côté de javascript.

Vous pouvez éventuellement retirer les éléments avec remove() mais ça compliquerait les choses car alors vous ne pourriez plus revenir en arrière sur la recherche de manière simple. Une solution, que je mettrais en place si j'étais à votre place, serait d'ajouter une classe en js sur les éléments restants afin d'appliquer le style, sans oublier de retirer ces classes si nouvelle recherche par l'utilisateur.
Oulà ça pique les yeux Smiley biggol

Comme disait mon maître de stage: "Tu peux copier tout ce que tu veux sur le net, mais à condition de comprendre le code" Smiley cligne

Mis à part ça, tu peux par exemple te faire un tableau d'origine et un tableau temporaire au "onchange" de l'input.
Quand tu filtre avec l'input tu crée un nouveau tableau, et à chaque fois que tu filtre tu pars de ton tableau d'origine, c'est propre et simple.
Petit exemple pour récupérer le tableau d'origine:

			document.addEventListener( 'DOMContentLoaded', function() {
			
				const thisTable = document.getElementById('myTable');
				let initialTable = [];
				
				for (let i = 1; i < thisTable.rows.length; i++ ) {

					initialTable[i] = [];
					const objCells = thisTable.rows.item(i).cells;

					for ( let j = 0; j < objCells.length; j++ ) initialTable[i][j] = objCells.item(j).innerText;

				}
				
				console.log(initialTable);
				
			});


Ensuite pour voir le principe ( regarde le code, comment on remplace le DOM selon l'input ) si besoin je te fais un code plug & play Smiley cligne
https://codepen.io/stryk/pen/MWjXxby?editors=1010
Merci pour les réponses.
J'arrive un peu a créer 2 ou 3 fonctions mais après je nage.

Je suis ok pour le code plug & play
Merci beaucoup pour le temps passé.
Il y a quelques bug.
Je saisie un mot dans la case, tout va bien (sauf la possibilité de trier qui disparaît).
J'efface idem.
Mais si je clique sur un en-tête de colonne pour trier là le tableau double.

J'hésite entre créer un bouton reset ou trouver une solution en java.
Le bouton reset me semble le plus rapide.

Quand pense tu ?
Cela m'embête de demander de coder encore.
Ah oui j'ai viré pleins de trucs hein Smiley biggrin
Là je t'ai juste mis le code pour filtrer ton tableau Smiley cligne
Petit exemple ici avec ton code et celui du tri.
https://codepen.io/TurtleVape/pen/rNMZRMN

Si par exemple je saisie le mot "Manuel", la liste est ok.
Ensuite si je clique sur le mot de l'entête de colonne "Nom du service", là çà bug.
Il affiche tous le tableau + les résultats filtrés ou non.
J'ai réussit a apporté une modif.
La manière n'es pas superbe mais çà fonctionne.
Il ne manquerait plus que le trie des résultats trouvés mais là c'est facultatif je trouve.
Voici le résultat :
https://codepen.io/TurtleVape/pen/ZEpMNyM

J'ai ajouté çà (ligne 19 à 27) :
		var verifid = document.getElementsByClassName('resultat2').length;
		console.log(verifid);
		if(verifid >= 0) {
			for (var k = 1; k<=verifid; k++) {
			let p2 = document.getElementById('resultat1');
			p2.remove();
			console.log(k);
			}
		}

Et j'ai modifié la ligne 68 :
thisTable.innerHTML += '<tr class="resultat2" id="resultat1" ><td>'+initialTable[i][0]+'</td><td>'+initialTable[i][1]+'</td><td>'+initialTable[i][2]+'</td></tr>';


Un énorme Merci
upload/1610412443-70123-modif.png
Modifié par Jerome87 (12 Jan 2021 - 01:47)
Hello,

Je viens de regarder, comportement curieux quand tu classes puis tu filtres ça bouffe une partie du tableau Smiley biggol
Je vais me pencher sur ton code demain !!
Hello,

Ah non en fait ça va ^
Je n'avais pas remarqué au départ que ton tableau n'était pas le même ( tu as mis moins de lignes sur celui-ci )
Bon, cela fonctionne comme tu veux, par contre je t'avoue que ce n'est pas super intuitif à la lecture, tu as pas mal de répétitions, tu pourrais optimiser le code, ou déjà commencer par le structurer un peu.
Hello,
Qu'entend tu par structurer (mise a part les tabulations) ?
Pour l'optimisation il y a 2 ou 3 truc a revoir mais après çà me dépasse vue mon faible niveau en java.
A+ Jérôme
Quand on parle de structure, ça signifie ranger tout à sa place, factoriser les répétitions de code ( par exemple avec une fonction ), nommer chaque objet par un nom sans équivoque, ce qui est génial c'est que c'est valable pour tous les langages, c'est juste une habitude à prendre.
Il y'a pleins de choses encore pour vraiment bien structurer, mais déjà commencer par ça c'est un bon début Smiley smile
Un exemple tout bête valable pour mieux saisir:


// Décorer une maison
// Début du code Mauvaise méthode

je ponce le mur de la chambre
je balaye par terre
je choisis la couleur rouge
je peints les murs de la chambre
je laisse sécher
je repasse une deuxième couche

je ponce le mur du salon
je balaye par terre
je choisis la couleur verte
je peints les murs du salon
je laisse sécher
je repasse une deuxième couche

je ponce le mur de la cuisine
je balaye par terre
je choisis la couleur bleue
je peints les murs de la cuisine
je laisse sécher
je repasse une deuxième couche

je vais acheter une chaise
je rentre à la maison
je déballe la chaise
je la place dans la chambre

je vais acheter une chaise
je rentre à la maison
je déballe la chaise
je la place dans le salon

je vais acheter une chaise
je rentre à la maison
je déballe la chaise
je la place dans la cuisine


Là tu vois que le code n'est pas optimisé niveau répétitions et surtout si tu dois modifier le code plus tard ce n'est pas évident à lire et donc à modifier et/ou corriger.

Maintenant, avec un peu de structure, on s'y retrouve plus facilement, c'est clair et facile à modifier:

// Décorer une maison
// Début du code Bonne méthode

mes pièces => salon, chambre, cuisine
mes couleurs => rouge, vert, bleu
faire fonction 'décorer la maison'

ma fonction décorer la maison ( mes pièces, mes couleurs ) =>
	Pour chaque pièce en cours =>
		faire fonction 'peindre' pièce en cours avec couleur en cours
		faire fonction 'placer chaise' dans la pièce en cours

ma fonction peindre ( pièce en cours, couleur choisie ) =>
	je ponce le mur de la pièce en cours
	je balaye par terre
	j'utilise la couleur choisie
	je peints les murs de la pièce en cours
	je laisse sécher
	je repasse une deuxième couche
	
ma fonction placer chaise ( pièce en cours ) =>
	je vais acheter une chaise
	je rentre à la maison
	je déballe la chaise
	je la place dans la pièce en cours
Ah oui effectivement.
Vue mon faible niveau j'en suis incapable.
Je vais arranger 2 ou 3 choses mais après c'est chaud.
Merci beaucoup pour le temps passé.
A+ Jérôme
Modifié par Jerome87 (18 Jan 2021 - 04:34)
Bonjour,

Dernière question je pense.
A la ligne 15 du code javascript ici => https://codepen.io/TurtleVape/pen/ZEpMNyM
Une ID est choisit mais au clique un peu plus loin (ligne 18).
La variable thx contient ceci si je clique sur la première colonne :
<th id="a"><div id="div1"><b>Trier :</b></div>Nom du service</th>

j'ai utilisé console.log(thx); pour obtenir ce contenu.
Je cherche a savoir si l'id sélectionné est le a ou b etc...
Mais je n'y arrive pas.
Auriez-vous une idée ?
Cordialement
Jérôme
Modifié par Jerome87 (18 Jan 2021 - 04:37)