如何更改JavaScript中的onclick事件中的gridview行顏色？

Question

我在ASP.NET中編寫了以下GridView代碼。我將AlternatingRow款式的BackColor設置爲素色。其餘行設置爲白色。

此代碼存在我grdRequests_RowDataBound事件中：

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

中的JavaScript ChangeRowColor上面的代碼如下：

function ChangeRowColor(row) 
{ 
    if (previousRow == row) 
     return;   

    else if (previousRow != null) 
     var color = row.style.backgroundColor; 

    if (previousRow != null) { 

     alert(color) 

     if (color == "bisque") { 
      previousRow.style.backgroundColor = "white"; 
     } 
     else if (color == "white") { 
      previousRow.style.backgroundColor = "bisque"; 
     }   
    } 

    row.style.backgroundColor = "#ffffda"; 
    previousRow = row;  
} 

當我點擊該行，我需要改變喜歡黃顏色。選擇另一行後，我需要將上一行的顏色切換回原來的顏色，但在我的代碼中這不起作用。有什麼建議麼？

Answer 1

你可以做這樣的...

protected void MyGridView_RowCreated(object sender, GridViewRowEventArgs e) 
{ 

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

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

     e.Row.Attributes.Add("id", 
     "row"+e.Row.RowIndex); 
     e.Row.Attributes.Add("onclick", 
     "ChangeRowColor(" +"'" + rowID + "'" + ")"); 
    }  
} 

這是Java Script代碼：

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

    document.body.style.cursor = 'pointer'; 


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

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

    alert(oldColor); 

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

    } 
</script> 

我希望它會幫助你.. ..

Answer 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 
     row.style.backgroundColor = "YELLOW" //if this is the color needed onclick; 
    } 

問候

Answer 3

你可以調用javascript f GridView RowDataBound事件中的聯合。

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 
         row.style.backgroundColor = "#ffffda"; 
        } 
        else { 
         //Apply White color to rest of rows 
         row.style.backgroundColor = "#ffffff"; 
        } 
      } 

      } 
     } 

    }