Как изменить цвета строки вида сетки в событии onclick в javascript? - PullRequest
1 голос
/ 19 октября 2011

Я написал следующий GridView код в ASP.NET.Я установил BackColor стиль AlternatingRow на бисквит.Остальные строки имеют белый цвет.

Этот код существует в моем 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;    
}

Когда я нажимаю на строку, мне нужно изменить цвет, как желтый.После выбора другой строки мне нужно переключить цвет предыдущей строки на прежний, но в моем коде это не работает.Есть предложения?

Ответы [ 3 ]

1 голос
/ 20 октября 2011

Вы можете сделать это следующим образом ...

 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>

Я надеюсь, это поможет вам ....

0 голосов
/ 13 декабря 2014

Вы можете вызвать функцию javascript в событии 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";
                    }
            }

            }
        }

    }
0 голосов
/ 19 октября 2011
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;
     }

Привет

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...