在 gridview 中使用 mouseover/mouseout 交替行答案

【问题标题】：using mouseover/mouseout in gridview with alternating rows在 gridview 中使用 mouseover/mouseout 交替行
【发布时间】：2009-03-31 13:04:19
【问题描述】：

我目前有一个交替颜色的网格视图，银色和白色，带有蓝色标题（显然不可选择）。最初，我让这个 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 out 函数：

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中给它行的id来获取行（用于onclick事件来改变行的颜色）。

问题是这样的：当我单击一行时，它会突出显示。然后当我移动鼠标时，其他行变得有点突出显示，这是正确的，但是当我单击另一行并将鼠标移出该行时，它会被取消突出显示。当我再次单击它时，它是否保持突出显示。 selectedIndex 只是页面上的一个隐藏字段。有谁明白为什么这不能正常工作？谢谢。

【问题讨论】：

标签： asp.net javascript gridview mouseover

【解决方案1】：

首先你可以用一些 CSS 来解决这个问题（IE6 不支持）：


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

如果我要使用 JavaScript，我会使用 unobtrusive technique。然后你可以跳过 C#。以下是你可以做到的：


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

你需要一些 CSS 才能工作：


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

【讨论】：