[Résolu] Changer la couleur d'une ligne TR au clic sur input

Bonjour,

J'arrive a faire ce qu'indique le titre.
Je clique sur une case à cocher et toute la ligne change de couleur.
Mais je me demande si il n'y a pas plus simple.
Sans ID par exemple.
Là j'ai ajouté des IDs (voir ligne 59 et 77)
Une fonction en ligne 5.

function test(id) {
	document.getElementById(id).parentElement.parentElement.style.background = "gold";
}

Et j'appel la fonction avec un onclick (ajouter dans le html via le code java en ligne 58)

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

Comment faire plus simple ? sans id par exemple.

Cordialement
Jérôme
Modifié par Jerome87 (04 Feb 2021 - 15:07)

Salut,

je ne suis pas un expert en Js (loin de là et j'ai pondu ca vite fait sans prendre le temps de chercher si c'était bien codé) donc c'est largement perfectible mais tu peux faire un truc du genre :

<input type="checkbox" onclick="test(this)">

function test(e) {
  e.parentElement.parentElement.style.background = "gold";
}

\ô/
avec

element.closest('tr');

sauf si besoin de IE

Merci beaucoup
J'avais bien pensé a "this" mais sans y arriver.

Voici le code final :

<input type="checkbox" onclick="sel(this)">

function sel(y) {
	x = y.closest('tr');
	if(y.checked) {x.style.background = "#8af"}
	else {x.removeAttribute("style")}
}

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

Cordialement
Jérôme
Modifié par Jerome87 (05 Feb 2021 - 03:33)

Bonjour,

J'ai un bug suite a une modif.
J'ai voulu ajouter un texte caché à coté de la checkbox pour pouvoir trier la colonne.
Le code ne trie que le texte.
Depuis cette modification la case ne se coche plus.

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

Le code modifié :

function sel(y) {
	x = y.closest('tr');
	if(y.checked) {
		x.style.background = "#8af";
		y.closest('td').innerHTML+= '<p>test</p>';
	} else {
		x.removeAttribute("style");
	}
}

Et dans le css :

p {display: none}

Là je nage.
Vous auriez une idée pour trier les case cochées ou corriger ce bug ?

Cordialement
Jérôme
Modifié par Jerome87 (05 Feb 2021 - 14:27)

Salut !

Tu peux creer un nouveau sujet avec ton soucis stp ?
Ca sera plus clair pour tout le monde.

Bonne soirée !

Finalement j'ai trouvé :

function sel(y) {
	x = y.closest('tr');
	if (y.checked) {
		x.style.background = "#8af";
		y.setAttribute('checked', '')
	} else {
		x.style.background = "";
		y.removeAttribute('checked', '')
	}
}

Merci