Change color of row based on value of a column in the row

Question

I have an sqldatasource that loads, data from my server and puts it in a datagrid.

I have a Column named clnumber that has, the numbers 1,2,3

What I want is that each row have a different color depending on which number is in that datarow column

THIS IS THE CODE I USED

 $(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

Granted you've given your gridview a css class called 'myGridView' you could do the following:

$(document).ready(function () {

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

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

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

where 'td:eq(1)' refers to the second cell in a row. This of course will depend on what cell in your row contains this magic number.

I'm certain it's not the most elegant use of jQuery, but you could refactor it as you wish

Answer 2

Based on the number how?
First row white, second grey?

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

or the other way around actually.

Answer 3

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

Answer 4

You can use similar to this:

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

you could do something like

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;

}