Surlignage d'une ligne d'un tableau

Résolu

t671 Messages postés 1476 Date d'inscription Statut Membre Dernière intervention -
t671 Messages postés 1476 Date d'inscription Statut Membre Dernière intervention - 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.

Afficher la suite

A voir également:

Surlignage d'une ligne d'un tableau
Tableau word - Guide
Trier un tableau excel - Guide
Tableau ascii - Guide
Comment imprimer un tableau excel sur une seule page - Guide
Partager photos en ligne - Guide

10 réponses

Réponse 1 / 10

Lord Zero Messages postés 459 Date d'inscription Statut Membre Dernière intervention 115

<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 1476 Date d'inscription Statut Membre Dernière intervention 11

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 Statut Membre Dernière intervention 115

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 Statut Membre Dernière intervention 115

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 1476 Date d'inscription Statut Membre Dernière intervention 11

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 1476 Date d'inscription Statut Membre Dernière intervention 11

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

Lord Zero Messages postés 459 Date d'inscription Statut Membre Dernière intervention 115

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

Réponse 6 / 10

t671 Messages postés 1476 Date d'inscription Statut Membre Dernière intervention 11

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 Statut Membre Dernière intervention 115

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 Statut Membre Dernière intervention 115

<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 Statut Membre Dernière intervention 2

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 Statut Membre Dernière intervention 2

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 1476 Date d'inscription Statut Membre Dernière intervention 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

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

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 1476 Date d'inscription Statut Membre Dernière intervention 11

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

aomann Messages postés 51 Date d'inscription Statut Membre Dernière intervention 2

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

Réponse 10 / 10

t671 Messages postés 1476 Date d'inscription Statut Membre Dernière intervention 11

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

Discussions similaires

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

Formule taux de marque

Votre réponse

Discussions similaires