Javascript 如何在javascript的onclick事件中更改gridview行颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7819638/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the gridview row colors in onclick event in javascript?
提问by hmk
I wrote the following GridViewcode in ASP.NET. I set the AlternatingRowstyle's BackColorto bisque. The remaining rows are set to white.
我GridView在 ASP.NET 中编写了以下代码。我将AlternatingRow样式设置BackColor为 bisque。其余行设置为白色。
This code exists within my grdRequests_RowDataBoundevent:
此代码存在于我的grdRequests_RowDataBound事件中：
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onclick", "ChangeRowColor(this)");
e.Row.Attributes.Add("onmouseover", "this.style.cursor=\'pointer\'");
}
The JavaScript ChangeRowColorcode above is as follows:
ChangeRowColor上面的 JavaScript代码如下：
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;
}
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?
当我单击该行时，我需要更改颜色，如黄色。选择另一行后，我需要将前一行的颜色切换回其旧颜色，但在我的代码中这不起作用。有什么建议？
采纳答案by Enigma State
you can do like this...
你可以这样做...
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 + "'" + ")");
}
}
And this is the Java Script code:
这是 Java 脚本代码：
<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>
i hope it will helps you....
我希望它会帮助你......
回答by Chandra Malla
You can call javascript function in GridView RowDataBound Event.
您可以在 GridView RowDataBound 事件中调用 javascript 函数。
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";
}
}
}
}
}
回答by Marwan
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;
}
Regards
问候
