2009-07-24 14 views
1

J'ai créé une table dans ASP MVC et la remplir avec les données d'une base de données. J'ai l'alternance des couleurs de ligne en utilisant le code suivant:asp mvc changer la couleur de la ligne dans la table après clic, un à la fois

<% if (count % 2 == 0) { %> 
    <tr class="offeven" onclick="this.className='onclick'" onmouseover="this.className='on'" onmouseout="this.className='offeven'"> 
<% } %> 
<% else { %> 
    <tr class="offodd" onclick="this.className='onclick'" onmouseover="this.className='on'" onmouseout="this.className='offodd'"> 
<% } count++; %> 

chaque classe a une couleur de fond différente. Donc ce que je veux, c'est que ça arrive. Quand un utilisateur va à la page, ils verront la table avec des couleurs de ligne alternées et quand une souris survole chaque rangée, cette rangée en question change de couleur. Quand ils sélectionnent une ligne, la ligne change de couleur et reste, même après que la souris a dépassé la portée de la ligne (donc onmouseout ne fonctionne pas). Maintenant j'ai écrit des fonctions très Javascript pour mon ancien site qui utilisait des gridviews et je ne pense pas qu'elles fonctionneront dans ce cas (du moins sans quelques modifications). Comment pourrais-je accéder aux lignes d'une table via Javascript et faire ce que j'ai besoin de faire? Edit: J'ai ajouté le: hover dans le CSS et cela fonctionne (dans FF, pas dans IE6) dans le sens où la ligne cliquée ne perd pas sa couleur de fond après que la souris quitte la portée de cette ligne. Mais le dernier obstacle est que j'ai besoin de n'importe quelle ligne pour changer à sa couleur d'arrière-plan originale quand une nouvelle rangée est cliquée, parce que pour le moment, chaque rangée met en évidence, mais ne détache pas.

Répondre

2

On peut le faire en utilisant certains jquery

$(”table tr:even”).addClass(”offeven″); 

Ajouter une décélération CSS au lieu d'utiliser onmouseover

.offeven:hover, .offodd:hover 

Peut-être une meilleure solution cross-browser est mentionné dans ce post:

jQuery Alternating Gray Rows in a Table, and Highlight Table Row Mouseover Example

+0

NB il devra coder js hover événements pour ie6 – redsquare

+0

Ou utiliser ce type de solution pour IE6: http://snipplr.com/view/1912/internet-explorer-ie6-css-hover/ (ce n'est pas IE6 déjà mort?) –

+0

Il peut l'utiliser aussi: http://www.xs4all.nl/~peterned/csshover.html –

Questions connexes