[Résolu] Ajouter un événement dans ce code

Bonjour,

Une personne du forum ma crée ce code qui fonctionne parfaitement. Merci a stryk
Je souhaite savoir si il est possible d'ajouter un événement ou une action.
Ce code filtre le contenu du tableau en saisissant un mot clé.
Une fois le mot clé saisi je souhaite ensuite cliquer sur un bouton pour réinitialiser le filtrage.
Une remise a zéro en quelque sorte.
Mais je ne voit pas comment faire.

for (var i = 1; i <= trxb.length; i++) {
	ajt = tbody.querySelector('tr:nth-of-type('+i+')').querySelector('td');
	ajt.innerHTML="<input type='checkbox'> " + ajt.innerHTML;
}
document.addEventListener( 'DOMContentLoaded', function trie() {
	const thisTable = document.getElementById('tbody1');
	let initialTable = [];
	for ( let i = 0; 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;
	}
	document.getElementById("tri").addEventListener('keyup',  event => {
		const inputValue = document.getElementById("tri").value;
		if ( inputValue != '' || inputValue != 'undefined') {
			thisTable.innerHTML = "";
			for ( let i = 0; i < initialTable.length; i++ ) {
				if ( initialTable[i][0].toLowerCase().indexOf(inputValue.toLowerCase()) > -1
					 || initialTable[i][1].toLowerCase().indexOf(inputValue.toLowerCase()) > -1
					 || initialTable[i][2].toLowerCase().indexOf(inputValue.toLowerCase()) > -1
					) {
					thisTable.innerHTML += '<tr class="resultat2" id="resultat1" ><td><input type="checkbox"> '+initialTable[i][0]+'</td><td>'+initialTable[i][1]+'</td><td>'+initialTable[i][2]+'</td></tr>';
				}
			}
		} else {
			for ( let i = 0; i < initialTable.length; i++ ) {
				thisTable.innerHTML = '<tr><td>'+initialTable[i][0]+'</td><td>'+initialTable[i][1]+'</td><td>'+initialTable[i][2]+'</td></tr>';
			}
		}
	});
});

https://codepen.io/TurtleVape/pen/ZEpMNyM

Qui a une idée ?

Cordialement
Jérôme
Modifié par Jerome87 (24 Jan 2021 - 21:01)

Pourquoi vouloir réinitialiser les filtres?
Il suffit de supprimer ce qu'on a écrit dans l'input non?

Pour pouvoir revoir le tableau complet.
Un clic sur le bouton et hop.
Mais là je n'arrive pas a créer cet événement de remise a zéro.

Bonjour,
L'événement (fonction 'recharge()' apparemment) doit :
- supprimer l'input (document.getElementById("tri").value="")
- remettre à zéro le tableau (refaire la fonction qui créé le tableau (comme au début) ou (mais je ne sais pas si ça fonctionne) refaire la fonction du keyup ou mimer un keyup)

PS : Doit-on pouvoir chercher 'désactivé', 'manuel', 'démarré'... dans le filtre ?(Ça fonctionne là !)


[EDIT]

alain_47 a écrit :
Ca fonctionne mais ca me semble loin d'être la meilleure solution à cause du "reload". Il me semble préférable de trouver une autre solution sans le "reload".

Je suis d'accord.
[/EDIT]

--------------------------------------------------------------------------------------------------
Quand vous avez trouvé votre réponse, cochez "Résolu" et indiquez la meilleure solution.
Modifié par js_html (26 Jan 2021 - 19:23)

Bonsoir,

On peut modifier un peu le code HTML mettant un bouton après le "input " :

<th colspan="3">
                    <input id="tri" type="text" class="table-filter" data-table="order-table" placeholder="Item to filter.." />
                    <button class="button" id="reset">?</button>  
                    <!-- <a href="#" class="button" onclick="recharge()">?</a> -->
                </th>

et mettre au debut du fichier js :

let inputTri = document.getElementById('tri');
let buttonReset = document.getElementById('reset');
buttonReset.addEventListener('click', () => {
    inputTri.value="";
    document.location.reload();
});

Ca fonctionne mais ca me semble loin d'être la meilleure solution à cause du "reload". Il me semble préférable de trouver une autre solution sans le "reload".
Modifié par alain_47 (26 Jan 2021 - 19:15)

Bonjour,

1) on supprime l'attribut onclick="recharge()" du lien (pourquoi un lien d'ailleurs et pas un bouton ?) qui permet de recharger.
2) juste avant la ligne document.getElementById("tri").addEventListener('keyup',event =>{...}) on ajoute une fonction magic() qui contiendra ce qu'il y a à la place des "..." dans document.getElementById("tri").addEventListener('keyup',event =>{...})

function magic(){
// mettre ici tout le code qui est pour l'instant à la place des "..." dans document.getElementById("tri").addEventListener('keyup',event =>{...})
}

3) remplacer "keyup" par "input", remplacer "..." par magic(), et ajouter une fonction qui se déclenche au clic sur le lien de recharge. C'est à dire qu'on va remplacer :

	document.getElementById("tri").addEventListener('input',  event => {...});

par

	document.getElementById("tri").addEventListener('input',  event => {
    magic();
  });
  document.querySelector("#tri+a").addEventListener('click',  event => {
    document.getElementById("tri").value="";
    magic();
  });

Et normalement, ça devrait tomber en marche.

Amicalement,

Bonjour,

Voici l'ensemble du code modifié (ne pas oublier de retirer onclick="recharge()" dans le code html)

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() {
    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);
      }
    }
    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;
}

document.addEventListener('DOMContentLoaded', function() {
  const thisTable = document.getElementById('tbody1');
  let initialTable = [];
  for (let i = 0; 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;
  }

  function magic(event) {
    const inputValue = document.getElementById("tri").value;
    if (inputValue != '' || inputValue != 'undefined') {
      thisTable.innerHTML = "";
      for (let i = 0; i < initialTable.length; i++) {
        if (initialTable[i][0].toLowerCase().indexOf(inputValue.toLowerCase()) > -1 ||
          initialTable[i][1].toLowerCase().indexOf(inputValue.toLowerCase()) > -1 ||
          initialTable[i][2].toLowerCase().indexOf(inputValue.toLowerCase()) > -1
        ) {
          thisTable.innerHTML += '<tr class="resultat2" id="resultat1" ><td>' + initialTable[i][0] + '</td><td>' + initialTable[i][1] + '</td><td>' + initialTable[i][2] + '</td></tr>';
        }
      }
    } else {
      for (let i = 0; i < initialTable.length; i++) {
        thisTable.innerHTML = '<tr><td>' + initialTable[i][0] + '</td><td>' + initialTable[i][1] + '</td><td>' + initialTable[i][2] + '</td></tr>';
      }
    }
  }

  document.getElementById("tri").addEventListener('input', event => {
    magic();
  });

  document.querySelector("#tri+a").addEventListener('click', event => {
    document.getElementById("tri").value = "";
    magic();
  });
});

Amicalement,
Modifié par parsimonhi (26 Jan 2021 - 20:48)

Merci beaucoup.
La dernière solution es top.

Voici le code final :
https://codepen.io/TurtleVape/pen/LYRwejg

Sinon oui la recherche peut être faite dans toutes les colonnes (ce tableau servira certainement pour d'autre contenus).

Le choix du faux bouton (type lien) était juste pour le côté pratique de la mise en forme en css.

Encore Merci.
J'ai un niveau très bas en java, j'arrive juste a créer 2 ou 3 fonctions, if et autre truc de base.
Modifié par Jerome87 (26 Jan 2021 - 21:58)