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

时间:2011-01-19 17:12:34

标签: asp.net jquery vb.net gridview

我有一个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" });

        }
    })
});

4 个答案:

答案 0 :(得分:3)

当然,您已经为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最优雅的用法,但你可以按照自己的意愿重构它

答案 1 :(得分:1)

根据数字如何?
第一排白色,第二排灰色?

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

或实际上相反。

答案 2 :(得分:1)

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

答案 3 :(得分:1)

您可以使用与此类似的内容:

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

}