1

我目前有一个带有交替颜色的网格视图,银色和白色,带有蓝色标题(显然不可选择)。最初,我让这个 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 只是页面上的一个隐藏字段。有谁明白为什么这不能正常工作?谢谢。

4

1 回答 1

3

首先你可以用一些 CSS 来解决这个问题(IE6 不支持):


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

如果我要使用 JavaScript,我会使用一种不显眼的技术。然后你可以跳过 C#。您可以这样做:


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

你需要一些 CSS 才能工作:


tbody tr.Highlight td {
 background-color: orange;
}
于 2009-04-20T21:55:27.810 回答