asp.net - グリッドビューで選択したアイテムの背景色を変更するにはどうすればよいですか?

Question

Asp.net Web アプリケーションで gridview の選択した項目の背景色を変更するにはどうすればよいですか?

Answer 1

GridView タグの下の aspx ページでそれを行うことができます。

<SelectedRowStyle BackColor="Orange" />  

ただし、マウス オーバーまたはマウス アウトで別の色が必要な場合は、RowDataBound イベントの下のコード ビハインドで次のことを試してください。

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Attributes.Add("onmouseover", "this.style.cursor='hand';this.style.backgroundColor='orangered'");
            e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='white'");
        }
    }

ボタンをクリックせずに行を選択する場合は、次のリンクも確認してください: ASP.NET: GridView で行を選択する

Answer 2

onmouseoverイベントで JavaScript 関数を呼び出すことができます。この Web サイトには簡単な例があります。

サーバー側:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.Attributes["onmouseover"] =
            "javascript:mouseovercolor(this);";
        e.Row.Attributes["onmouseout"] =
            "javascript:mouseoutcolor(this);";
    }
}

クライアント側:

<script language=javascript type="text/javascript">
    function mouseovercolor(mytxt) {
        mytxt.bgColor = 'Orange';
    }
    function mouseoutcolor(mytxt) {
        element.bgColor = 'White';
    }
</script>

編集済み: このサイトにはonClick、イベントで機能させる方法の良い例があります:

サーバ側：

protected void GridView1_RowDataBound(Object sender, GridViewRowEventArgs e){
  if (e.Row.RowType == DataControlRowType.DataRow){
    // javascript function to call on row-click event
    e.Row.Attributes.Add("onClick", "javascript:void SelectRow(this);");
  }
 }

クライアント側：

<script type="text/javascript">
         // format current row
         function SelectRow(row) {
             var _selectColor = "#303030";
             var _normalColor = "#909090";
             var _selectFontSize = "3em";
             var _normalFontSize = "2em";
             // get all data rows - siblings to current
             var _rows = row.parentNode.childNodes;
             // deselect all data rows
             try {
                 for (i = 0; i < _rows.length; i++) {
                     var _firstCell = _rows[i].getElementsByTagName("td")[0];
                     _firstCell.style.color = _normalColor;
                     _firstCell.style.fontSize = _normalFontSize;
                     _firstCell.style.fontWeight = "normal";
                 }
             }
             catch (e) { }
             // select current row (formatting applied to first cell)
             var _selectedRowFirstCell = row.getElementsByTagName("td")[0];
             _selectedRowFirstCell.style.color = _selectColor;
             _selectedRowFirstCell.style.fontSize = _selectFontSize;
             _selectedRowFirstCell.style.fontWeight = "bold";
         }
</script>