mouseover/mouseoutを交互の行のgridviewで使用する

Question

私は現在、青色のヘッダー（明らかに選択できません）を使用して、シルバーとホワイトの交互の色を持つgridviewを持っています。最初は、このonmouseover/onmouseoutのものが動作していたが、何らかの理由で、昨日の午前には動作しなかったし、昨日一日中、私は苦労して答えを求めて、グーグルと短いです。ここではデータバインドされた機能は次のとおりです。

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

そしてここでのonmouseoverで、機能をonmouse：

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のがこれで設定されている：

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

この関数は、単に行を取得しますグリッドビュー内の行のid（行の色を変更するためにonclickイベントに使用されます）を与えます。

問題は次のとおりです。行をクリックすると、その行が強調表示されます。次に、マウスを動かすと、他の行が多少強調表示されますが、これは正しいですが、別の行をクリックしてその行からマウスを移動すると、強調表示されなくなります。そして、もう一度クリックすると、強調表示されますか？ selectedIndexは、ページ上の隠しフィールドです。なぜこれが正しく機能しないのか誰にも見えますか？ありがとう。

Answer 1

あなたには、いくつかのCSS（IE6ではサポートされていません）で、この問題を解決することができ、すべての最初に：私はunobtrusive techniqueを使用するJavaScriptを使用した場合

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

。その後、C＃をスキップすることができます。これが機能するために

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

あなたは、いくつかのCSSを必要とする：ここではあなたがそれを行うことができる方法である

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