Merci pour vos réponses.
Mon niveau en java
script est bien trop faible pour que j'arrive à faire quelque chose de propre et correct.
J'arrive juste à bricoler.
Mon code tourne en local, je ne prévois pas de le mettre sur un site.
@niuxe : je n'ai pas vu le bug au niveau du trie.
@_laurent : En fait j'ajoutais le paramètre checked car il y avait un bug, quand je cliquais sur la case elle ne se cocher pas. Maintenant tous va bien de ce côté.
Maintenant j'ajoute une value 0 car la fonction de trie la prend en compte en utilisant innerHTML au lieu de TextContent :
const tdVal = (row, ids) => row.children[ids].innerHTML,
function sel(y) {
x = y.closest('tr');
if (y.checked) {
x.style.background = "#8af";
y.value = 0
} else {
x.style.background = "";
y.value = 1
}
}
Ensuite pour les cases à cocher, je les ajoute via java
script car je veut garder le fichier html le plus alléger. Le fichier sera destiné à être utilisé dans d'autres situations et par des personnes qui ne connaissent pas le codage. Je n'aurais qu'a leur dire ou écrire leurs données.
Là le fichier fonctionne correctement en locale.
J'aimerais bien suivre et savoir mettre en pratique tous vos conseils mais je bien trop mauvais en java
script.
Merci pour toutes vos réponses.
Cordialement
Jérôme
Ci-joint le code complet du fichier :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Services inutiles</title>
<style>
* {font-family: "Fira Sans", sans-serif}
input[type='checkbox'] {filter: hue-rotate(20deg)}
table {
border-collapse: collapse;
margin: -7px auto
}
th, td, #bt {padding: 2px 4px}
th, #bt {color: #fff}
th {background: #5d625c}
#l1 {text-align: right}
#l1, #t2 {color: #c6c3bd}
#bx, tr:nth-child(odd) {background: #dddad4}
#bx {
color: blue;
width: 105px;
outline: 0
}
#t2, #nb {position: absolute}
tr {color: #444}
tr:nth-child(even) {background: #c6c3bd}
#bt {
border-radius: 2px;
text-decoration: none;
font-size: 12px;
background: blue;
box-shadow: inset 2px 2px 3px #88f, inset -2px -2px 2px #13a;
margin-left: 2px
}
#bt:active {color: #ff0}
span {
font-size: 9px;
bottom: 3px;
margin: 0 5px;
position: relative
}
#nb {margin-left: 34px}
#a, #nb {width: 434px}
#nb {
text-align: center;
color: lime
}
</style>
</head>
<body>
<table>
<thead>
<tr><th id="l1" colspan="4"><div id="nb"></div>Rechercher : <input id="bx" type="text"/><a href id="bt" onclick="vide()">?</a></th></tr>
<tr><th id="a"><div id="t2">Trier :</div><span>?</span>Nom du service<span>?</span></th>
<th id="b"><span>?</span>Etat<span>?</span></th>
<th id="c"><span>?</span>Démarrage<span>?</span></th></tr>
</thead>
<tbody id="tb">
<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>
</tbody>
</table>
</body>
<script>
var clik = 0,
myBox = document.getElementById("bx"),
nb = document.getElementById("nb");
function sel(y) {
x = y.closest('tr');
if (y.checked) {
x.style.background = "#8af";
y.value = 0
} else {
x.style.background = "";
y.value = 1
}
}
function stylraz(raz) {
nb.innerHTML = "";
f0 = document.querySelectorAll("span, #t2");
for (var a = 0; a < f0.length; a++) {
f0[a].style.color = "";
if(raz == 1) {f0[a].innerHTML = f0[a].innerHTML.replace("?","?")}
}
}
//Tri
const compar = (ids, asc) => (row1, row2) => {
const tdVal = (row, ids) => row.children[ids].innerHTML,
tri = (v1, v2) => v1 !== '' && v2 !== '' && !isNaN(v1, v2) ? v1 - v2 : v1.toString().localeCompare(v2);
return tri(tdVal(asc ? row1 : row2, ids), tdVal(asc ? row2 : row1, ids));
};
const tbx = document.getElementById('tb'),
thx = document.querySelectorAll('#a, #b, #c'),
trx = tbx.querySelectorAll('tr');
thx.forEach(tht => tht.addEventListener('click', () => {
//Filtrea0
v = tbx.querySelectorAll('#z').length;
for (var b = 1; b <= v; b++) {document.getElementById('z').remove()}
//Filtrea0
myBox.value="";
let classe = Array.from(trx).sort(compar(Array.from(thx).indexOf(tht), this.asc = !this.asc));
//Style et Flèche
if (clik == 1) {r1 = '?', r2 = '?', clik = 0}
else {r1 = '?', r2 = '?', clik = 1}
tht.innerHTML = tht.innerHTML.replaceAll(r1,r2);
stylraz(0);
document.getElementById("t2").style.color = "lime";
w = tht.querySelectorAll("span");
for (var c = 0; c < w.length; c++) {w[c].style.color = "lime"}
//Fin Style...
classe.forEach(tr => tbx.appendChild(tr));
}));
//Tri
//Filtre
for (var d = 0; d < trx.length; d++) {trx[d].querySelector('td').insertAdjacentHTML('afterbegin', '<input type="checkbox" onclick="sel(this)" value="1"> ')}
document.addEventListener('DOMContentLoaded', function () {
const Tab = document.getElementById('tb');
let Tab1 = [];
for (let e = 0; e < Tab.rows.length; e++) {
Tab1[e] = [];
const objCells = Tab.rows.item(e).cells;
for (let f = 0; f < objCells.length; f++) {Tab1[e][f] = objCells.item(f).innerHTML}
}
document.getElementById("bx").addEventListener('input', event => {
const caseVal = document.getElementById("bx").value;
if (caseVal.length > 0){stylraz(1)}
if (caseVal != '' || caseVal != 'undefined') {
Tab.innerHTML = "";
let Tab2 = [];
for (let g = 0; g < Tab1.length; g++) {
z = Tab1[g];
for (let h = 0; h < 3; h++) {Tab2[h] = z[h].toLowerCase().indexOf(caseVal.toLowerCase())}
if (Tab2[0] > -1 || Tab2[1] > -1 || Tab2[2] > -1) {Tab.innerHTML += '<tr id="z"><td>'+z[0]+'</td><td>'+z[1]+'</td><td>'+z[2]+'</td></tr>'}
}
nb.innerHTML = tbx.querySelectorAll('#z').length+" résultat(s) trouvé(s)";
}
});
});
//Filtre
function vide() {
var myBoxEven = new Event('input',{bubbles:true,cancelable: true});
myBox.value="";
myBox.dispatchEvent(myBoxEven);
stylraz(1)
}
</script>
</html>
Modifié par Jerome87 (09 Feb 2021 - 01:36)
mais c'est plutôt comme ca que j'ai tendance a l'aborder. [EDIT]-> Ah bah Niuxe est là on est sauvé 
[/EDIT] 
