Gridview点击一行变色，，再点击变回原来颜色。。

cookies10wen 2009-01-19 11:23:28

GridView 样式如下：



       <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BackColor="White"

            BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px" CellPadding="4" DataKeyNames="Id"

            Font-Size="10pt" OnPageIndexChanging="GridView1_PageIndexChanging" OnRowCancelingEdit="GridView1_RowCancelingEdit"

            OnRowDeleting="GridView1_RowDeleting" OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating"

            PageSize="20">                 

                 <RowStyle BackColor="White" ForeColor="#330099" />          

            <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />

            <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />

            <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" CssClass="Freezing"  />

            <AlternatingRowStyle BackColor="#f5f5f5"/>        

            </asp:GridView>

如何实现鼠标每单击一行，该行变色，再单击变回原来颜色（注：行颜色是一白一灰的）,请大家帮忙看看。。

...全文

1309 44 打赏收藏转发到动态举报

写回复

用AI写文章

44 条回复

切换为时间正序

请发表友善的回复…

发表回复

cherry_li 2009-11-30

打赏
举报

[Quote=引用 6 楼 cutbug 的回复:]
HTML code<htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title>无标题页</title><scriptlanguage="javascript" type="text/javascript">var oldRow=null;
window.onload=function()
?-
[/Quote]

谢谢Cutbug,这是我之前希望达到的一个效果.

maihuasen1978 2009-08-20

打赏
举报

3楼的方法加SKIN就不能用了，其他的方法加在UPDATEPANEL里面一样经过重载GRIDVIEW也用不上呵呵

bclzwq 2009-01-22

打赏
举报

你说的是不是多选?

xugh 2009-01-22

打赏
举报

一般js就解决了

darkmetre 2009-01-22

打赏
举报

。。。。。。呃，是想在多项记录复选的时候使用吗？

king_博古 2009-01-22

打赏
举报

以上高手都说了。
写个事件就ok。。

phf0313 2009-01-22

打赏
举报

嗯，很好的功能，收藏了。

girlhappy 2009-01-22

打赏
举报

前台 js

var OldRowBgColor;
var NewRowBgColor=""; //鼠标滑过的颜色
var MarkRowBgColor="yellow"; //鼠标点下的颜色
function ChangeRowBg(row)
{
if(event.type== 'mouseover')
{
OldRowBgColor = row.style.backgroundColor
row.style.backgroundColor = NewRowBgColor
}
else if (event.type== 'mouseout')
{
row.style.backgroundColor = OldRowBgColor;
}
}
function ChangeRowBgEven(row)
{
if (event.type== 'mousedown')
{
if (row.style.backgroundColor != MarkRowBgColor)
{
row.style.backgroundColor = MarkRowBgColor;
row.onmouseout = function(){return false;}
row.onmouseover= function(){return false;}
}
else
{
row.style.backgroundColor= '';
}
}
}
function ChangeRowBgImpair(row)
{
if (event.type== 'mousedown')
{
if (row.style.backgroundColor!= MarkRowBgColor)
{
row.style.backgroundColor = MarkRowBgColor;
row.onmouseout = function(){return false;}
row.onmouseover= function(){return false;}
}
else
{
row.style.backgroundColor = NewRowBgColor;
}
}
}

后台：
private static void ChangeRowBg(GridView grdTable)
{
for (int i = 0; i < grdTable.Rows.Count; i++)
{
grdTable.Rows[i].Attributes.Add("onmouseover ", "ChangeRowBg(this) ");
grdTable.Rows[i].Attributes.Add("onmouseout ", "ChangeRowBg(this) ");
if (i % 2 == 0)
grdTable.Rows[i].Attributes.Add("onmousedown ", "ChangeRowBgEven(this) ");
else
grdTable.Rows[i].Attributes.Add("onmousedown ", "ChangeRowBgImpair(this) ");
}
}
这样调用： ChangeRowBg(this.rscountGridView);
ChangeRowBg(this.rsredGridView);

MAOGE1987 2009-01-22

打赏
举报

楼上不要激动啊~~大家都是新手过来的啊

kingya2008 2009-01-22

打赏
举报

我服了，你。。。。我。。。。无语了

就加在gridview的前台页面<head></head>之间，我真的没有语言，这个都不知道还搞啥子搞？？？

kingya2008 2009-01-21

打赏
举报

哎呀呀，原来是交替变换颜色呀，哇咔咔

看来只有拿出法宝了

加一个tr的样式就OK，不用js了
<style type="text/css">
tr{ryo:expression(onclick=function(){this.style.backgroundColor=(this.style.backgroundColor=='#cccccc'?((this.rowIndex%2==0)?"whitesmoke":"white"):'#cccccc')})}
</style>

cookies10wen 2009-01-21

打赏
举报

[Quote=引用 31 楼 cndotaci 的回复:]
引用 5 楼 cookies10wen 的回复:
3楼的实现一半，，，点击可以变色，，但是我想要每一行点击都可以变色，，用户再点击该行的时候才变回原来的颜色...

都可以变了，你还不能给他变回来？？
[/Quote]

他是一行灰一行白的，，我不知道怎么判断，，29楼的也没实现。。

cookies10wen 2009-01-21

打赏
举报

我说Kingya2008，，你发个样式出来又不告诉我把这个样式加在哪里。。。晕。。。。

云想慕尘 2009-01-20

打赏
举报

[Quote=引用 5 楼 cookies10wen 的回复:]
3楼的实现一半，，，点击可以变色，，但是我想要每一行点击都可以变色，，用户再点击该行的时候才变回原来的颜色...
[/Quote]
都可以变了，你还不能给他变回来？？

kingya2008 2009-01-20

打赏
举报

我说楼主，你根本没用我的方法吧，你要我截个图给你么？单选多选颜色都会保留

rodgerluo 2009-01-20

打赏
举报

我一直都是这样解决的
呵呵

//GridView事件绑定（子模块绑定）
void gvModule_RowDataBound(object sender, GridViewRowEventArgs e)
{
// e.Row.Attributes.Add("onmouseover", "color=this.style.backgroundColor;this.style.backgroundColor='#ADB2C6'");
// e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=color");

}

llsen 2009-01-20

打赏
举报

[Quote=引用 7 楼 koukoujiayi 的回复:]
如果不考虑单击其他行把颜色改回来,应该更简单!!
在GridView的RowDataBound事件中输入以下代码:
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onclick", "ItemOver(this)");
}
}

js:
<script type="text/javascript">
functio…
[/Quote]

学习

Isbaihe 2009-01-20

打赏
举报

按照楼主的要求，在dataGridView1中加一个dataGridView1_CellClick 事件就可以了。

private void dataGridView1_CellClick(object sender, DataGridViewCellEventArgs e)
{
int x，y;
x = dataGridView1.CurrentRow.Index;
for (y = 0; y <= dataGridView1.Rows[x].Cells.Count-1; y++)
{
if (dataGridView1.Rows[x].Cells[y].Style.BackColor == System.Drawing.Color.White)
{
dataGridView1.Rows[x].Cells[y].Style.BackColor = System.Drawing.Color.Gray;
}
else
{
dataGridView1.Rows[x].Cells[y].Style.BackColor = System.Drawing.Color.White;
}

}

}

chengxiaorong 2009-01-20

打赏
举报

14楼正解

wonture 2009-01-20

打赏
举报

[Quote=引用 21 楼 cookies10wen 的回复:]
未解决，以上多数都是单击行1变色，单击行2变色（但行1自动变回原色），我是想用户单击行1时，行1才变回原色，意思是用户无论点击多少行都会变色，想变回原来颜色就点击该行变OK。。。。呵呵。。。小弟想了很久也想不到，，，请大家帮帮忙解决。。。
[/Quote]
晕死，你要这种效果啊？全世界都误会了！