在gridview里面选HeaderTemplate里的checkbox后，全选ItemTemplate里的checkbox，如何实现选中行颜色的变化，要用js实现，（在后台我已经实现了，要刷新页面不是很喜欢）
在gridview里面选HeaderTemplate里的checkbox后，全选ItemTemplate里的checkbox，如何实现选中行颜色的变化，要用js实现，（在后台我已经实现了，要刷新页面不是很喜欢） --------------------编程问答-------------------- 你可以用ajax.net的updatepanel控件实现局部刷新，也可以用JS
获取相应Form中的checkbox控件，然后操作相应样式。
--------------------编程问答-------------------- 帮顶 --------------------编程问答-------------------- <%@ Page Language="C#" AutoEventWireup="true" CodeFile="gv3.aspx.cs" Inherits="gv3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script language ="javascript" type ="text/javascript" >
function a(obj)
{
//alert("进入方法");
if(obj.checked)
{
obj.parentNode.parentNode.style.backgroundColor='blue';
}
else
{
obj.parentNode.parentNode.style.backgroundColor='';
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<input id='Checkbox_<%# Eval("ID") %>' type="checkbox" onclick ="a(this);" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<input id="Checkbox1" checked ="checked" type="checkbox" /></div>
</form>
</body>
</html>
--------------------编程问答-------------------- 我上面实现的是单个点击,如果是全选的话应该也差不多 --------------------编程问答--------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShowNews.aspx.cs" Inherits="ShowNews" %>
<%@ Register Src="WebUserControl.ascx" TagName="WebUserControl" TagPrefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>新闻管理</title>
<script type="text/javascript">
function SelectAll(tempControl)
{
var theBox=tempControl;
xState=theBox.checked;
elem=theBox.form.elements;
for(i=0;i<elem.length;i++)
{
if(elem[i].type=="checkbox" && elem[i].id!=theBox.id)
{
if(elem[i].checked!=xState)
{
elem[i].click();
}
}
}
}
function changecolor(cbo,o)
{
var theBox=cbo;
var tr=document.getElementById(o);
if(theBox.checked)
{
tr.style.backgroundColor="Red";
}
else
{
tr.style.backgroundColor="#CCCCCC";
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table border="1" cellspacing="0" cellpadding="0" style="width: 800px" align="center" >
<tr>
<td>
<uc1:WebUserControl ID="WebUserControl1" runat="server" />
</td>
</tr>
<tr>
<td style="height: 154px">
<asp:GridView ID="GridUsers" runat="server" AutoGenerateColumns="False" DataKeyNames="NewId" Width="795px" OnRowDeleting="GridUsers_RowDeleting" OnRowDataBound="GridUsers_RowDataBound"
>
<Columns>
<asp:HyperLinkField DataNavigateUrlFields="NewId" DataNavigateUrlFormatString="UpdataNews.aspx?NewId={0}"
DataTextField="NewTitle" HeaderText="新闻标题" />
<asp:BoundField DataField="NewText" HeaderText="内容" />
<asp:BoundField DataField="NewTime" HeaderText="发布时间" SortExpression="UserName" >
<ControlStyle Width="100px" />
</asp:BoundField>
<asp:BoundField DataField="UserLogin" HeaderText="发布人" SortExpression="UserPwd" >
<ControlStyle Width="100px" />
</asp:BoundField>
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Delete"
OnClientClick="return confirm('你确定要删除此项吗?');" Text="删除"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="CheckAll" runat="server" Text="全选" onclick="javascript:SelectAll(this);" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckSingle" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 1712px; height: 19px">
</td>
<td style="width: 100px; height: 19px">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
参考这个。。。颜色你可以改你自己喜欢的。 --------------------编程问答-------------------- function UpDomAll(changeBox)
{
var gridView = document.getElementById("GridView1"); //这里放指定的GridView的ID,可以从changeBox分析得出
var tbodyNode = gridView.childNodes[0];
for(var i =1;i<tbodyNode.childNodes.length;i++)
{
var rowBox = tbodyNode.childNodes[i].childNodes[0].firstChild.lastChild;
if(rowBox.checked != changeBox.checked && !rowBox.disabled)
{
rowBox.checked = changeBox.checked;
UpDom(tbodyNode.childNodes[i].childNodes[0].firstChild);
}
}
}
应该和这个差不多 --------------------编程问答-------------------- 没用啊！全选可以的,但是不能改变颜色啊 --------------------编程问答--------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script language="javascript" type="text/javascript">
function selectAll(obj)
{
//var elem=document.getElementById('GridView1').getElementsByTagName('INPUT');
var elem=document.getElementById('<%= GridView1.ClientID%>').getElementsByTagName('INPUT');
//var elem=obj.parentNode.parentNode.parentNode.getElementsByTagName('INPUT');
for(i=0;i<elem.length;i++)
{
if(elem[i].type=="checkbox" && elem[i].id!='cbkALL')
{
elem[i].checked=obj.checked;
if(obj.checked)
{
elem[i].parentNode.parentNode.style.backgroundColor='red';
}
else
{
elem[i].parentNode.parentNode.style.backgroundColor='';
}
}
}
}
function changeColor(obj)
{
if(obj.checked)
obj.parentNode.parentNode.style.backgroundColor='red';
else
obj.parentNode.parentNode.style.backgroundColor='';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<input type="checkbox" id='ckbALL' onclick="selectAll(this);" />
</HeaderTemplate>
<ItemTemplate>
<input type="checkbox" name="ckb" onclick="changeColor(this);"/>
<asp:Button ID="btn" runat="server" Text="ok" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
--------------------编程问答-------------------- 学习了
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class test : System.Web.UI.Page
{
protected DataTable getDataTable()
{
System.Data.DataTable dt = new System.Data.DataTable();
System.Data.DataRow dr;
dt.Columns.Add(new System.Data.DataColumn("ID", typeof(System.Int32)));
dt.Columns.Add(new System.Data.DataColumn("Name", typeof(System.String)));
dr = dt.NewRow();
dr[0] = 1;
dr[1] = "小明";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr[0] = 2;
dr[1] = "小强";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr[0] = 3;
dr[1] = "小张";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr[0] = 4;
dr[1] = "小李";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr[0] = 5;
dr[1] = "小关";
dt.Rows.Add(dr);
return dt;
}
protected void Page_Load(object sender, EventArgs e)
{
GridView1.DataSource = getDataTable();
GridView1.DataBind();
}
}
补充：.NET技术 , ASP.NET
