Tableau php et javascript
Sarah
-
Sarah -
Sarah -
Bonjour à tous,
Voilà mon problème :
J'ai un tableau dans lequel je remplis les lignes avec les données de ma base de donnée. Jusque là tout va bien. Ensuite quand je survole le tableau avec ma souris le fond se change.
Lorsque je survole ça change mais est il possible que si on clic sur la ligne 1 la couleur reste (même si on survole une autre comme une mémorisation ) mais si on clic sur la ligne 2 c'est elle qui devient en couleur (qui reste jusqu'à temps qu'on clic sur une autre) ?
Merci d'avance à tous
P.S: j'ai trouvé ce petit script car je suis une bille en JS
Voilà mon problème :
J'ai un tableau dans lequel je remplis les lignes avec les données de ma base de donnée. Jusque là tout va bien. Ensuite quand je survole le tableau avec ma souris le fond se change.
<style type="text/css">
tr { background-color:#fff; }
.survolRed {background-color:#8cbfff;}
</style>
<script type="text/javascript">
function hoverTr() {
var tabTr = document.getElementsByTagName('tr'); // récupération de tous les tr
for(var i = 0; i < tabTr.length; i++) {
if(tabTr[i].className != 'blanc')// filtre sur les tr donc seule celle dont le className != 'blanc' changerons de couleur au passage de la souris
{
tabTr[i].onmouseover = survolerTr; //onmouseover
tabTr[i].onmouseout = QuitterTr; //onmouseout
}
}//for
function survolerTr() {
this.className = 'survolRed';
}//onmouseover
function QuitterTr() {
this.className = '';
}//onmouseout
}
</script>
Lorsque je survole ça change mais est il possible que si on clic sur la ligne 1 la couleur reste (même si on survole une autre comme une mémorisation ) mais si on clic sur la ligne 2 c'est elle qui devient en couleur (qui reste jusqu'à temps qu'on clic sur une autre) ?
Merci d'avance à tous
P.S: j'ai trouvé ce petit script car je suis une bille en JS
A voir également:
- Tableau php et javascript
- Tableau word - Guide
- Tableau ascii - Guide
- Trier un tableau excel - Guide
- Tableau croisé dynamique - Guide
- Imprimer tableau excel sur une page - Guide
2 réponses
Salut,
Je te conseille d'utiliser jQuery, c'est plus rapide et facile à réaliser !
Je te conseille d'utiliser jQuery, c'est plus rapide et facile à réaliser !
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<style>
tr { background-color:#fff; }
.selected {background-color:#8cbfff;}
.hovered {background-color:#8cbfff;}
</style>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function() {
$("tr").on("click", function() {
$("tr").removeClass("selected");
$(this).addClass("selected");
});
$("tr").mouseenter(function() {
$(this).addClass("hovered");
});
$("tr").mouseleave(function() {
$(this).removeClass("hovered");
});
});
</script>
<head>
<body>
<table>
<tr>
<td>Element 1</td>
</tr>
<tr>
<td>Element 2</td>
</tr>
<tr>
<td>Element 3</td>
</tr>
</table>
</body>
</html>
