Surlignage d'une ligne d'un tableau

Résolu/Fermé

t671 Messages postés 1419 Date d'inscription lundi 25 février 2008 Statut Membre Dernière intervention 26 février 2024 - 23 nov. 2012 à 18:40
t671 Messages postés 1419 Date d'inscription lundi 25 février 2008 Statut Membre Dernière intervention 26 février 2024 - 27 nov. 2012 à 15:03

Bonjour,

Est-il possible de surligner une ligne (tr) lors du visionnage d'un tableau html.
Si le tableau a plusieurs lignes, cela permettrait une meilleure vision !

Merci.

A voir également:

Surlignage d'une ligne d'un tableau
Tableau croisé dynamique - Guide
Tableau ascii - Guide
Tableau word - Guide
Aller à la ligne excel - Guide
Hors ligne instagram - Guide

10 réponses

Réponse 1 / 10

Lord Zero Messages postés 459 Date d'inscription lundi 18 octobre 2010 Statut Membre Dernière intervention 15 juin 2018 115
24 nov. 2012 à 10:38

<style type="text/css">
    tr { background-color:#f6f6f0; }
    tr:hover { background-color:#47F934; }
</style>
<table border=1 cellspacing="5" cellpadding="5">
<tr>
<th>Titre 1</th>
<th>Titre 2</th>
<th>Titre 3</th>
<th>Titre 4</th>
</tr>
<tr>
<td>Exemple 1</td>
<td>Exemple 2</td>
<td>Exemple 3</td>
<td>Exemple 4</td>
</tr>
<tr>
<td>Exemple 5</td>
<td>Exemple 6</td>
<td>Exemple 7</td>
<td>Exemple 8</td>
</tr>
<tr>
<td>Exemple 9</td>
<td>Exemple 10</td>
<td>Exemple 11</td>
<td>Exemple 12</td>
</tr>
</table>

Comme ça?

Réponse 2 / 10

t671 Messages postés 1419 Date d'inscription lundi 25 février 2008 Statut Membre Dernière intervention 26 février 2024 11
25 nov. 2012 à 09:52

Effectivement, ça fonctionne sous firefox ! Dommage que la ligne ne reste pas marqué quand on clique dessus ......
Et pour IE ? Tu me proposes quoi en javascript ?

Lord Zero Messages postés 459 Date d'inscription lundi 18 octobre 2010 Statut Membre Dernière intervention 15 juin 2018 115
26 nov. 2012 à 15:19

Tu met un id a tes tr ou td et un evenement onmouseout et onmouseover sur le backgroundcolor ta le meme resultat.

Réponse 3 / 10

Lord Zero Messages postés 459 Date d'inscription lundi 18 octobre 2010 Statut Membre Dernière intervention 15 juin 2018 115
Modifié par Lord Zero le 23/11/2012 à 19:13

Les tableaux ont le style "border" qui permet de délimiter par une bordure, sinon met un border bottom a tes td

Développeur VB6, VBS, VBA, VB.NET, C#, HTML, PHP, JAVASCRIPT, SQL.

Réponse 4 / 10

t671 Messages postés 1419 Date d'inscription lundi 25 février 2008 Statut Membre Dernière intervention 26 février 2024 11
23 nov. 2012 à 19:27

Le cadre est déjà présent. Ce que je veux, c'est un moyen de surligner la ligne si on clique dessus .......

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 10

t671 Messages postés 1419 Date d'inscription lundi 25 février 2008 Statut Membre Dernière intervention 26 février 2024 11
24 nov. 2012 à 15:38

Merci Lord Zero. Mais désolé car le "tr:hover" ne fonctionne pas !?

Lord Zero Messages postés 459 Date d'inscription lundi 18 octobre 2010 Statut Membre Dernière intervention 15 juin 2018 115
Modifié par Lord Zero le 24/11/2012 à 19:52

Sur firefox mais pas ie
Colle ton code stp, il reste toujours javascript

Réponse 6 / 10

t671 Messages postés 1419 Date d'inscription lundi 25 février 2008 Statut Membre Dernière intervention 26 février 2024 11
Modifié par t671 le 26/11/2012 à 18:00

J'ai trouvé ceci :

<tr bgcolor="#CCCCCC" align="center" scrolling="yes" onclick="this.style.background=\'#eeeeee\'">

Ca fonctionne très bien ! Le seul petit problème, c'est que si je sélectionne une ligne, puis une deuxième, la première reste sélectionnée !

Lord Zero Messages postés 459 Date d'inscription lundi 18 octobre 2010 Statut Membre Dernière intervention 15 juin 2018 115
26 nov. 2012 à 18:21

Sur les onclick des autres tr, remet la couleur transparente en donnant un id a tes tr

Réponse 7 / 10

Lord Zero Messages postés 459 Date d'inscription lundi 18 octobre 2010 Statut Membre Dernière intervention 15 juin 2018 115
26 nov. 2012 à 19:29

<html>
<head>
<title></title>
<script language="javascript" type="text/javascript">
function tr1() {
document.getElementById('tr1').style.backgroundColor="red"
document.getElementById('tr2').style.backgroundColor="transparent"
document.getElementById('tr3').style.backgroundColor="transparent"
document.getElementById('tr4').style.backgroundColor="transparent"
}
function tr2() {
document.getElementById('tr2').style.backgroundColor="red"
document.getElementById('tr1').style.backgroundColor="transparent"
document.getElementById('tr3').style.backgroundColor="transparent"
document.getElementById('tr4').style.backgroundColor="transparent"
}
function tr3() {
document.getElementById('tr3').style.backgroundColor="red"
document.getElementById('tr1').style.backgroundColor="transparent"
document.getElementById('tr2').style.backgroundColor="transparent"
document.getElementById('tr4').style.backgroundColor="transparent"
}
function tr4() {
document.getElementById('tr4').style.backgroundColor="red"
document.getElementById('tr1').style.backgroundColor="transparent"
document.getElementById('tr2').style.backgroundColor="transparent"
document.getElementById('tr3').style.backgroundColor="transparent"
}
</script>
</head>
<body>
<table border=1 cellspacing="5" cellpadding="5">
<tr id="tr1" onclick="tr1()">
<th>Titre 1</th>
<th>Titre 2</th>
<th>Titre 3</th>
<th>Titre 4</th>
</tr>
<tr id="tr2" onclick="tr2()">
<td>Exemple 1</td>
<td>Exemple 2</td>
<td>Exemple 3</td>
<td>Exemple 4</td>
</tr>
<tr id="tr3" onclick="tr3()">
<td>Exemple 5</td>
<td>Exemple 6</td>
<td>Exemple 7</td>
<td>Exemple 8</td>
</tr>
<tr id="tr4" onclick="tr4()">
<td>Exemple 9</td>
<td>Exemple 10</td>
<td>Exemple 11</td>
<td>Exemple 12</td>
</tr>
</table>
</body>
</html>

Réponse 8 / 10

aomann Messages postés 51 Date d'inscription lundi 26 novembre 2012 Statut Membre Dernière intervention 4 décembre 2012 2
27 nov. 2012 à 02:03

Salut,

J'ai simplement simplifié le code de Lord Zero:

<html>
<head>
<title></title>
<script language="javascript" type="text/javascript">
var objDerniereRanger;

function afficherCouleur(objRanger) {				
	objRanger.style.backgroundColor = "red"
	
	if(objDerniereRanger != null){
		objDerniereRanger.style.backgroundColor = "transparent";
	}
	
	objDerniereRanger = objRanger;
}

</script>
</head>
<body>
<table border=1 cellspacing="5" cellpadding="5">
<tr id="tr1" onclick="afficherCouleur(this)">
	<th>Titre 1</th>
	<th>Titre 2</th>
	<th>Titre 3</th>
	<th>Titre 4</th>
</tr>
<tr id="tr2" onclick="afficherCouleur(this)">
	<td>Exemple 1</td>
	<td>Exemple 2</td>
	<td>Exemple 3</td>
	<td>Exemple 4</td>
</tr>
<tr id="tr3" onclick="afficherCouleur(this)">
	<td>Exemple 5</td>
	<td>Exemple 6</td>
	<td>Exemple 7</td>
	<td>Exemple 8</td>
</tr>
<tr id="tr4" onclick="afficherCouleur(this)">
	<td>Exemple 9</td>
	<td>Exemple 10</td>
	<td>Exemple 11</td>
	<td>Exemple 12</td>
</tr>
</table>
</body>
</html>

aomann Messages postés 51 Date d'inscription lundi 26 novembre 2012 Statut Membre Dernière intervention 4 décembre 2012 2
27 nov. 2012 à 03:33

Il faudrait modifier cette ligne pour ne pas effacer la couleur d'arrière-plan dans le cas où on reclique sur la même rangé:

if(objDerniereRanger != null && objRanger != objDerniereRanger ){

Réponse 9 / 10

t671 Messages postés 1419 Date d'inscription lundi 25 février 2008 Statut Membre Dernière intervention 26 février 2024 11
27 nov. 2012 à 12:11

Merci à tous !
(A noter, que je n'ai qu'un seul <tr> qui se trouve dans une boucle WHILE).
La solution de Lord Zero laise la première ligne sélectionnée, même si on sélectionne d'autre ligne. J'ai bien sûr testé en supprimant tr2, tr3 et tr4.
La solution de aomann fonctionne très bien ! Seul petit défaut (mineur), C'est que si on clic sur une ligne déjà sélectionnée, elle se désélectionne (ok). Mais je ne peux eznsuite la resélectionner dans la foulée sans en sélectionner une autre avant. Avec la dernière remarque if(objDerniereRanger != null && objRanger != objDerniereRanger ){, plus rien ne fonctionne ......

morloch
Modifié par morloch le 27/11/2012 à 13:37

Salut, plus simple pour la lisibilité de plusieurs lignes:
choisir une couleur de fond différent, donc dans votre boucle vous ajoutez un test pour savoir si la ligne est paire ou impaire
// exemple en php meme raisonnement en javascript mais syntaxe différente
if(is_int($compte_ligne/2)){ //si le nombre de lignes divisé par 2 est un entier: nombre pair
<tr style='background-color:#ff0000;'>
//-- mon contenu
</tr>
}else{
// nombre impair
<tr style='background-color:#00ff00;'>
//-- mon contenu
</tr>

}

morloch
27 nov. 2012 à 13:38

ps: la solution de lordZero ne tient pas compte des lignes sélectionnées mais du survol ou non de la balise tr.

t671 Messages postés 1419 Date d'inscription lundi 25 février 2008 Statut Membre Dernière intervention 26 février 2024 11
27 nov. 2012 à 13:57

Merci morloch ! Toujours bon à savoir ....... ;o)

aomann Messages postés 51 Date d'inscription lundi 26 novembre 2012 Statut Membre Dernière intervention 4 décembre 2012 2
Modifié par aomann le 27/11/2012 à 14:45

Allez voir : http://alexomann.com/so/f1.php De mon côté ça marche...

Réponse 10 / 10

t671 Messages postés 1419 Date d'inscription lundi 25 février 2008 Statut Membre Dernière intervention 26 février 2024 11
27 nov. 2012 à 15:03

Merciiiiiiiiiiii beaucoup Aomann !!!!!
J'avais oublié une ligne .............. ;o))
Encore merci et A ++

Discussions similaires

Que veut dire "correspondant occupé" lors d'un appel ?

Trouver le nom d'un tableau avec sa photo.

Statut « en ligne » alors que non

Discussions similaires

Newsletters