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

이 기능은 단지 행을 얻을 여기에 데이터 바인딩 기능입니다 gridview (행의 색상을 변경하기 위해 onclick 이벤트에 사용됨)의 행 ID를 지정합니다.

문제는 다음과 같습니다. 행을 클릭하면 강조 표시됩니다. 그런 다음 마우스를 움직이면 다른 행이 약간 강조 표시됩니다. 올바른 것이지만 다른 행을 클릭하고 해당 행에서 마우스를 움직이면 강조 표시됩니다. 그리고 다시 클릭하면 강조 표시됩니까? selectedIndex는 페이지의 숨겨진 필드 일뿐입니다. 왜이 기능이 제대로 작동하지 않는지 누구나 알 수 있습니까? 감사. 모든

Answer 1

먼저 (IE6에서 지원되지 않음) 일부 CSS와 함께이 문제를 해결할 수 :

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

나는 내가 unobtrusive technique을 사용 자바 스크립트를 사용한다면. 그런 다음 C#을 건너 뛸 수 있습니다. 이 작업을 위해

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

당신은 어떤 CSS가 필요합니다 : 여기 당신이 그것을 할 수있는 방법입니다

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