11487 sujets

JavaScript, DOM et API Web HTML5

[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)
Modérateur
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,
Modérateur
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)
Modérateur
Bonjour,

Voici une variante.

On garde le code de https://codepen.io/TurtleVape/pen/ZEpMNyM initial tel quel et on ajoute tout à la fin :
function recharge()
{
  var myInput = document.getElementById("tri");
  var myInputEvent = new Event('keyup',{bubbles:true,cancelable: true});
  myInput.value="";
  myInput.dispatchEvent(myInputEvent);
}

Eventuellement, on peut remplacer les deux 'keyup' par 'input' (c'est mieux parce que parfois, l'utilisateur peut coller quelque chose dans l'input via un menu au lieu de faire une saisie clavier, et dans un tel cas, le 'keyup' ne marchera pas).

Amicalement,
Meilleure solution
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)
Bonjour,
Petit bug.
J'ai voulu alléger le code. (Je suis un peu maniaque Smiley langue )
Notamment sur cette partie :
if ( originTab[i][0].toLowerCase().indexOf(inputValue.toLowerCase()) > -1
					 || originTab[i][1].toLowerCase().indexOf(inputValue.toLowerCase()) > -1
					 || originTab[i][2].toLowerCase().indexOf(inputValue.toLowerCase()) > -1
					)


Ce qui donne :
if (oriTab[0] > -1 || oriTab[1] > -1 || oriTab[2] > -1)


Et le code complet :
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 originTab = [];
	for (let i = 0; i < thisTable.rows.length; i++) {
		originTab[i] = [];
		const objCells = thisTable.rows.item(i).cells;
		for (let j = 0; j < objCells.length; j++) originTab[i][j] = objCells.item(j).innerText;
	}
	document.getElementById("tri").addEventListener('input', event => {
		const inputValue = document.getElementById("tri").value;
		if (inputValue != '' || inputValue != 'undefined') {
			thisTable.innerHTML = "";
			oriTab = [];
			for (let i = 0; i < originTab.length; i++) {
				for (let m = 0; m < 3; m++) {
					oriTab[m] = originTab[i][m].toLowerCase().indexOf(inputValue.toLowerCase());
				}
				if (oriTab[0] > -1 || oriTab[1] > -1 || oriTab[2] > -1) {
					thisTable.innerHTML += '<tr class="resultat2" id="resultat1" ><td><input type="checkbox"> '+originTab[i][0]+'</td><td>'+originTab[i][1]+'</td><td>'+originTab[i][2]+'</td></tr>';
				}
			}
		} else {
			for (let i = 0; i < originTab.length; i++) {
				thisTable.innerHTML = '<tr><td>'+originTab[i][0]+'</td><td>'+originTab[i][1]+'</td><td>'+originTab[i][2]+'</td></tr>';
			}
		}
	});
});


Comme je ne maîtrise pas le sujet j'ai crée un bug.
La recherche ne se fait plus que sur la première colonne au lieu de l'intégralité du tableau.
La création de oriTab[m] doit mettre la pagaille.

Quel serait la solution ?
Cordialement
Jérôme
Modifié par Jerome87 (29 Jan 2021 - 13:28)
Bonjour,
solution trouvée (comme quoi la nuit porte conseil)

Avant
oriTab = [];


Après
let oriTab = [];


Cordialement
Jérôme
Sujet clos
Aller à