How to change the gridview row colors in onclick event in javascript?

I wrote the following GridView code in ASP.NET. I set the AlternatingRow style’s BackColor to bisque. The remaining rows are set to white.

This code exists within my grdRequests_RowDataBound event:

if (e.Row.RowType == DataControlRowType.DataRow)
    e.Row.Attributes.Add("onclick", "ChangeRowColor(this)");
    e.Row.Attributes.Add("onmouseover", "\'pointer\'");

The JavaScript ChangeRowColor code above is as follows:

function ChangeRowColor(row) 
    if (previousRow == row) 

    else if (previousRow != null)
        var color =;

    if (previousRow != null) {


        if (color == "bisque") {
   = "white";
        else if (color == "white") {
   = "bisque";
    } = "#ffffda";
    previousRow = row;    

When I click the row, I need to change the color like yellow. After selecting another row, I need to switch the previous row’s color back to its old color, but in my code this doesn’t work. Any suggestions?

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

you can do like this…

 protected void MyGridView_RowCreated(object sender, GridViewRowEventArgs e)

    string rowStyle = "
    = 'yellow'";
    string rowStyleClickedTwice =
    " = 'blue'";
    string rowID = String.Empty; 

    if (e.Row.RowType == DataControlRowType.DataRow)
        rowID = "row"+e.Row.RowIndex; 

        "ChangeRowColor(" +"'" + rowID + "'" + ")");

And this is the Java Script code:

 <input type="hidden" id="hiddenColor"  />
 <script language ="javascript" type="text/javascript"> = 'pointer'; 

 function ChangeRowColor(rowID) 
     var color = document.getElementById(rowID).style.backgroundColor;

     if(color != 'yellow') 
     document.getElementById("hiddenColor").style.backgroundColor = color;


     if(color == 'yellow')
    document.getElementById(rowID).style.backgroundColor = document.getElementById("hiddenColor").style.backgroundColor;
     document.getElementById(rowID).style.backgroundColor = 'yellow';             


i hope it will helps you….

Solution 2

in ur function use the row object to get the rows to loop over them and return them to there default color

  function ChangeRowColor(row) 

          var rows = row.parentNode.getElementsByTagName('TR');
          //loop over all rows and set there colors to default
          for(var i =0;i<rows.length;i++)
             rows[i].style.backgroundColor= 'White'; //if its your default color 
         //set the current row to be with the needed color = "YELLOW" //if this is the color needed onclick;


Solution 3

You can call javascript function in GridView RowDataBound Event.

 protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)  
             if (e.Row.RowType == DataControlRowType.DataRow)    
                e.Row.Attributes.Add("onClick", "ChangeColor('" + "GridView1','" + (e.Row.RowIndex+1).ToString() + "')");

    function ChangeColor(GridViewId, SelectedRowId) {
        var GridViewControl = document.getElementById(GridViewId);
        if (GridViewControl != null) {
            var GridViewRows = GridViewControl.rows;
            if (GridViewRows != null)
                var SelectedRow = GridViewRows[SelectedRowId];
                //Remove Selected Row color if any
                for (var i = 1; i < GridViewRows.length; i++) {
                    var row = GridViewRows[i];
                    if (row == SelectedRow) {
                        //Apply Yellow color to selected Row
               = "#ffffda";
                    else {
                        //Apply White color to rest of rows
               = "#ffffff";



Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply