根据行中列的值更改行的颜色

Question

我有一个 sqldatasource，它从我的服务器加载数据并将其放入数据网格中。

我有一个名为 clnumber 的列，其中包含数字 1、2、3

我想要的是每一行都有不同的颜色，具体取决于该数据行列中的数字

这是我使用的代码

 $(document).ready(function () {

    $("#<%=GridView1.UniqueID%> tr").each(function () {

        var number = $(this).children('td:eq(6)').text();

        if (number == 'OK') {
            $(this).children('td').css({ "background-color": "lightgreen" });

        }
    })
});

Answer 1

如果您为 gridview 提供了一个名为“myGridView”的 css 类，您可以执行以下操作：

$(document).ready(function () {

    $('.myGridView tr').each(function () {

        var number = $(this).children('td:eq(1)').text();

        if (number == '1') {
            $(this).children('td').css('background', 'red');
        }
    })
});

其中 'td:eq(1)' 指的是一行中的第二个单元格。这当然取决于行中的哪个单元格包含这个幻数。

我确定这不是 jQuery 最优雅的用法，但您可以根据需要对其进行重构

Answer 2

根据数量如何？
第一行白色，第二行灰色？

if(rownumber%2 == 0) //white
else //grey

实际上反之亦然。

Answer 3

如果指示应该使用哪种颜色的数字实际上是在 HTML 输出中生成的，为什么不使用 javascript？

Answer 4

你可以使用类似这样的：

    /// <summary>
    /// Updates the row fore colour to show the line type
    /// </summary>
    /// <param name="sender">object</param>
    /// <param name="e">args</param>
    protected void gvLineValues_RowDataBound( object sender, GridViewRowEventArgs e )
    {
        try
        {
            //Format the row
            this.FormatRow( e );
        }
        catch ( Exception ex )
        {
            ErrorLogging.LogError( ex );
        }
    }

  /// <summary>
        /// Formats a gridview row
        /// </summary>
        /// <param name="e">Gridview event args</param>
        private void FormatRow( GridViewRowEventArgs e )
        {
            try
            {
                //Change the forecolor of the row
                if ( e.Row.RowType == DataControlRowType.DataRow )
                {
                    OrderLine oOrderLine = e.Row.DataItem as OrderLine;

                    if ( oOrderLine != null )
                    {
                        e.Row.ForeColor = oOrderLine.ForeColour;


                                //Check the line is over budget
                                if ( oOrderLine.OverBudget )
                                {
                                    e.Row.BackColor = ColourManager.OverBudgetItemBackColour;
                                    e.Row.ToolTip = String.Format( "Item over {0} and awaiting your approval", GlobalizationManager.Budget );
                                }
                                else
                                {
                                    e.Row.BackColor = ColourManager.WithinBudgetItemBackColour;
                                    e.Row.ToolTip = "Item awaiting your approval";
                                }
                            }
                        }

                        //Change the back colour of the row if its a deleted row
                        if ( oOrderLine.Deleted )
                        {
                            e.Row.Font.Strikeout = true;
                            e.Row.ToolTip = "This line has been deleted";
                        }
                    }
                }
            }
            catch ( Exception )
            {
                throw;
            }
        }

你可以做类似的事情

switch ( DataItem.ColorNumber )
{
case 1:

e.row.backcolor = Color.blue;

break;

case 2:

e.row.backcolor = Color.red;

break;

case 3:

e.row.backcolor = Color.white;

break;

}