Question

我目前有一个网格视图，交替颜色，银色和白色，蓝色标题（显然不可选）。最初，我有这个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只是页面上的隐藏字段。有谁知道为什么这不能正常运作？感谢。

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

在gridview中使用mouseover / mouseout和交替的行

1 个答案: