utilisant mouseover/mouseout en gridview avec des rangées alternant

Question

J'ai actuellement un GridView avec alternance de couleurs, argent et blanc, avec un en-tête bleu (non sélectionnable, évidemment). Au départ, j'avais cette machine à onmouseover/onmouseout en état de marche, mais pour une raison quelconque, hier matin, ça n'a pas fonctionné, et toute la journée d'hier, j'ai lutté, je cherchais des réponses et me suis retrouvé court. Voici la fonction databound:

protected void GridView_OnRowCreated(object sender, GridViewRowEventArgs e) 
    { 
     if (e.Row.RowType == DataControlRowType.DataRow) 
     { 
      e.Row.Attributes.Add("onclick", "onGridViewRowSelected('" + j.ToString() + "')"); 
      e.Row.Attributes.Add("onmouseover", "HighlightOn(this)"); 
      e.Row.Attributes.Add("onmouseout", "HighlightOff(this)"); 
     } 
    } 

Et voici le onmouseover et onmouse des fonctions:

function HighlightOn(rowid) 
{ 
    if (document.getElementById(gridViewCtlId).disabled == false) 
    { 
     if ($(selectedIndex).val() != rowid.rowIndex) 
     { 
      rowid.style.backgroundColor = '#8FBAEF'; 
     } 
    } 
} 

function HighlightOff(rowid) 
{ 
    if (document.getElementById(gridViewCtlId).disabled == false) 
    { 
     if ($(selectedIndex).val() != rowid.rowIndex) 
     { 
      var modIdx = rowid.rowIndex % 2; 
      if (modIdx == 0) 
      { 
       rowid.style.backgroundColor = 'Silver'; 
      } 
      else 
      { 
       rowid.style.backgroundColor = 'White'; 
      } 
     } 
    } 
} 

selectedIndex est réglé par ceci:

function getSelectedRow(rowIdx) 
{ 
    getGridViewControl(rowIdx); 
    if (gridViewCtl != null) 
    { 
     $(selectedIndex).val(rowIdx); 
     return gridViewCtl.rows[rowIdx]; 
    } 
    return null; 
} 

Cette fonction obtient juste la ligne en lui donnant l'id de la ligne dans un gridview (utilisé pour l'événement onclick pour changer la couleur de la ligne).

Le problème est: Lorsque je clique sur une ligne, il est mis en surbrillance. Lorsque je déplace ensuite la souris, les autres lignes sont mises en surbrillance, ce qui est correct, mais lorsque je clique sur une autre ligne et déplace la souris hors de cette ligne, elle est désactivée. Et quand je clique dessus, reste-t-il en surbrillance. selectedIndex est juste un champ caché sur la page. Est-ce que quelqu'un voit pourquoi cela ne fonctionne pas correctement? Merci.

Answer 1

d'abord tout ce que vous pouvez résoudre ce problème avec certains CSS (non pris en charge dans IE6):

tbody tr:hover td { 
    background-color: orange; 
} 

Si je devais utiliser JavaScript j'utiliser un unobtrusive technique. Ensuite, vous pouvez passer le C#. Voici comment vous pouvez le faire:

$(function() { 
    $("tbody tr") 
    .mouseenter(function() { 
     $(this).addClass("Highlight"); 
    }) 
    .mouseleave(function() { 
     $(this).removeClass("Highlight"); 
    }); 
}); 

Vous avez besoin de CSS pour que cela fonctionne:

tbody tr.Highlight td { 
background-color: orange; 
}