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 に答える