mit mouseover/mouseout in gridview mit alternierenden Zeilen

Question

Ich habe derzeit eine Gridview mit wechselnden Farben, Silber und Weiß, mit einem blauen Header (nicht wählbar, natürlich). Am Anfang hatte ich diese OnMouseOver/OnMouseOut-Sache, aber aus irgendeinem Grund, gestern Morgen, hat es versagt zu arbeiten, und den ganzen Tag gestern habe ich gekämpft, nach Antworten gegoogelt und zu kurz gekommen. Hier ist die Databound-Funktion:

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)"); 
     } 
    } 

Und hier ist die Onmouseover und OnMouse out Funktionen:

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 wird durch das:

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

Diese Funktion wird nur die Zeile indem Sie ihm in einer Gridview die ID der Zeile geben (wird für das onclick-Ereignis verwendet, um die Farbe der Zeile zu ändern).

Das Problem ist folgendes: Wenn ich auf eine Zeile klicke, wird sie hervorgehoben. Wenn ich dann die Maus bewege, werden die anderen Zeilen etwas hervorgehoben, was korrekt ist, aber wenn ich auf eine andere Zeile klicke und die Maus aus dieser Zeile bewege, wird sie deaktiviert. Und wenn ich nochmal darauf klicke, bleibt es markiert. selectedIndex ist nur ein verstecktes Feld auf der Seite. Kann jemand sehen, warum das nicht richtig funktioniert? Vielen Dank.

Answer 1

Zunächst einmal können Sie dieses Problem mit einigen CSS lösen (nicht in IE6 unterstützt):

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

Wenn ich JavaScript verwenden wäre, würde ich einen unobtrusive technique verwenden. Dann können Sie die C# überspringen. Hier ist, wie Sie es tun können:

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

Sie müssen einige CSS für diese arbeiten:

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