100分求关于客户端脚本的一个问题，急急急。

Question

我遇到一个问题，一直都想不出来，可能是自己掌握的不好。我需要用一个table表格来在网页上显示从数据库里读出的一系列记录。
每行（每个<tr></tr>）对应一条记录的多个字段。
并且，每条（行）记录中，都设置一个单选按钮。
并且我在下面设置了一个删除按纽。点击该单选按纽，我希望将本行的背景色进行改变，此时，我按删除按纽，要能删除这一行，并更新数据库。我原先的做法，是用Datalist，做了两个假图片，分别表示单选按钮的选种与否，并将图片贴在imagebutton上投机的让用户以为是真正的单选按钮。
然后设置itemtemplate和selectedtemplate的bkcolor，所以就做出了我要的效果。但是这样的做法我觉得不好，每次选中一行，就提交一次页面。我希望是用客户端脚本来实现，而不是用datalist.其实我要的这种效果，在个人的信箱里，普遍存在这种效果。每封信都是一条记录，每行前都有一个按钮，点该行的单选按钮，就变背景色。点了单选按钮，按另外一个删除按钮，就在页面上去掉这一行。请高手指点，因为我在家没带任何参考书，所以我真的不知道怎么做。谢谢

Answer 1

.....................
和服务器交互一定是提交一次的
不和服务器交互在客户端增加删除table的行是可以
但是由于你的数据删除还是要反映到数据库还是需要提交的
你何苦那

Answer 2

我的意思是说，我在选中每一行的时候，我不让他提交，而让该行背景色变化。
只有当我按删除按钮的时候，我要删掉table里的那行，再修改数据库。

Answer 3

var t=false;
function selectAll(){
var len=document.Form1.elements.length;
var i;
var j;
t=!t;
 for (i=0;i<len;i++){
 if (document.Form1.elements[i].type=="checkbox"){
  document.Form1.elements[i].checked=t;
}
 }
}
使用这个JAVASCRIPT脚本可以是选全选的功能...
这个使用datagrid比较好实现.....
你可以遍例每个选种的值...
public static string GetSelectItem(DataGrid dataGrid,string ControlID)
{
   string str_checkCount="";

   //遍历
   foreach(DataGridItem item in dataGrid.Items )
   {
if(((CheckBox)item.FindControl(ControlID)).Checked==true)
str_checkCount+=dataGrid.DataKeys[item.ItemIndex]+",";
    }

    //去掉末尾的逗号
   if(str_checkCount.Length>0)
      str_checkCount=str_checkCount.Substring(0,str_checkCount.Length-1);

return str_checkCount;
 }
使用datalist应该和这个差不多...

Answer 4

楼主改变一下思维吧，我用这个就能实现你那些，你看看
aspx关键代码<SCRIPT language="JavaScript">
function SetCheckBoxState()
{
var dom=document.all;
var el=event.srcElement;
if(el.tagName=="INPUT"&&el.type.toLowerCase()=="checkbox")
{
for(i=0;i<dom.length;i++)
{
if(dom[i].tagName=="INPUT"&&dom[i].type.toLowerCase()=="checkbox")
{
dom[i].checked=false;
}
}
}
el.checked=!el.checked;
}
</SCRIPT><form id="FrmDataGrid" method="post" runat="server">
<asp:datagrid id="dataGrid" runat="server"><Columns>
<asp:TemplateColumn HeaderText="选择">
<ItemTemplate>
<asp:CheckBox id="chkExport" runat="server"></asp:CheckBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:BoundColumn Visible="False" DataField="ID" HeaderText="编号"></asp:BoundColumn>
<asp:TemplateColumn>
<ItemStyle Wrap="False"></ItemStyle>
<HeaderTemplate>序号</HeaderTemplate>
<ItemTemplate>
<%# Container.DataSetIndex + 1 %>
</ItemTemplate>
</asp:TemplateColumn>
<asp:BoundColumn DataField="Name" HeaderText="名称"></asp:BoundColumn>
</Columns>
</asp:datagrid><asp:button id="btnDel" runat="server" Text="删除"></asp:button>
</form>CS关键代码
private void InitializeComponent()
{    
this.dataGrid.ItemDataBound += new System.Web.UI.WebControls.DataGridItemEventHandler(this.dataGrid_ItemDataBound);
this.btnDel.Click += new System.EventHandler(this.btnDel_Click);
this.Load += new System.EventHandler(this.Page_Load);
}


//选中变色
private void dataGrid_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
if(e.Item.ItemIndex<0)  return;
if(e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
System.Web.UI.WebControls.CheckBox chkExport; 
chkExport=(CheckBox)e.Item.FindControl("chkExport");
chkExport.Attributes.Add("OnClick","SetCheckBoxState()");
e.Item.Attributes.Add("onmouseover","currentcolor=this.style.backgroundColor;this.style.backgroundColor='FDF0BC'");
e.Item.Attributes.Add("onmouseout","this.style.backgroundColor=currentcolor");
}
}//删除指定
private void btnDel_Click(object sender, System.EventArgs e)
{
System.Web.UI.WebControls.CheckBox chkExport;
foreach (DataGridItem dataGridItem in dataGrid.Items)
{
chkExport=(CheckBox)dataGridItem.FindControl("chkExport");
if(chkExport.Checked)
{
string delStr = "delete from [Down] where ID = '" + dataGridItem.Cells[1].Text.ToString() + "'";
doData.opData(delStr);
}
}  //重新绑定数据Response.Redirect("class_list.aspx");}

Answer 5

下面这样：对你的选中按钮有如下JS端 onclick="clicked()"事件<script language=jscript>
var color1=....; //这里设定tr的初始颜色
var color2=....; //这里设定tr的选中的颜色
var aa;//选中的行对象
function clicked()
{
  if(aa!=null)
    aa.style.backgroundColor = color1;  //恢复上次选中行的颜色
   var e = window.event.srcElement;
   try
   {
     var p = e.parentElement;
     while (p.tagName.toLowerCase()!= "tr")
       p = p.parentElement;
     aa=p;
     aa.style.backgroundColor = color2;//使当前选中行变色
   }
   catch(e)
   {}
}
</script>

Answer 6

.aspx<asp:datagrid id=DataGridOptLog style="Z-INDEX: 104; LEFT: 0px; POSITION: absolute; TOP: 42px" runat="server" Width="639px" Height="240px" DataKeyField="pkid" AllowPaging="True" PageSize="8" AutoGenerateColumns="False">
<AlternatingItemStyle CssClass="gridalteritem"></AlternatingItemStyle>
<ItemStyle CssClass="griditem"></ItemStyle>
<HeaderStyle CssClass="headcenter" BackColor="#FFF7CE"></HeaderStyle>
<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<asp:CheckBox id="CheckBox1" runat="server"></asp:CheckBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:BoundColumn DataField="number" HeaderText="序号"></asp:BoundColumn>
<asp:BoundColumn DataField="OperatorID" HeaderText="用户ID"></asp:BoundColumn>
<asp:BoundColumn DataField="OperatorName" HeaderText="用户姓名"></asp:BoundColumn>
<asp:BoundColumn DataField="OperateTime" HeaderText="操作时间"></asp:BoundColumn>
<asp:BoundColumn DataField="FuncName" HeaderText="操作模块"></asp:BoundColumn>
<asp:BoundColumn DataField="OperationDescription" HeaderText="操作描述"></asp:BoundColumn>
</Columns>
<PagerStyle HorizontalAlign="Right" PageButtonCount="5" Mode="NumericPages"></PagerStyle>
</asp:datagrid>
.csusing System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;using qminoa.DA;
using qminoa.Common;namespace qminoa.Webs.sysSecurity
{
public class OperationLog : qminoa.Webs.PageBase
{
protected System.Web.UI.WebControls.Panel Panel1;
protected System.Web.UI.WebControls.ImageButton ImgBdel;
protected System.Web.UI.WebControls.DataGrid DataGridOptLog;
protected System.Web.UI.WebControls.CheckBox CheckBox2; private void Page_Load(object sender, System.EventArgs e)
{
this.PageBegin("操作日志",true); if(Page.IsPostBack ==false)
{
DataGridOptLogBind();
}
} #region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN：该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}

/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
{    
this.Load += new System.EventHandler(this.Page_Load);
this.DataGridOptLog.PageIndexChanged += new System.Web.UI.WebControls.DataGridPageChangedEventHandler(this.DataGridOptLog_PageIndexChanged);
this.DataGridOptLog.ItemDataBound += new System.Web.UI.WebControls.DataGridItemEventHandler(this.DataGridOptLog_ItemDataBound);
this.ImgBdel.Click += new System.Web.UI.ImageClickEventHandler(this.ImgBdel_Click);
this.CheckBox2.CheckedChanged += new System.EventHandler(this.CheckBox2_CheckedChanged);
}
#endregion public void MyBindData()
{
LogDB myclass= new LogDB ();
DataTable mytable=myclass.ReadOperationLog();
DataColumn  mycolumn=  mytable.Columns.Add ("number",System.Type .GetType ("System.String"));
for (int i=0;i<mytable.Rows.Count ;i++)
{
mytable.Rows [i]["number"]=(i+1).ToString ();
}
DataGridOptLog.DataSource =mytable;
DataGridOptLog.DataBind ();
} public void DataGridOptLogBind()
{
DataGridOptLog.CurrentPageIndex =0;
MyBindData();
} public void DelOptLog(int pkid)
{
LogDB myclass= new LogDB ();
myclass.DelOptLog(pkid);
} private void ImgBdel_Click(object sender, System.Web.UI.ImageClickEventArgs e)
{
if(this.EmpRightCode == 4)
{
foreach(DataGridItem thisItem in DataGridOptLog.Items)
{
if(((CheckBox)thisItem.Cells[0].Controls[1]).Checked) 
{
int LogID = Convert.ToInt16(DataGridOptLog.DataKeys[thisItem.ItemIndex]);

DelOptLog(LogID);
}
}
this.WriteOptLog("删除操作日志信息");
JScript.Alert("删除成功！");
if( DataGridOptLog.CurrentPageIndex == DataGridOptLog.PageCount-1)
DataGridOptLog.CurrentPageIndex =DataGridOptLog.CurrentPageIndex-1;
MyBindData();
}
else
{
JScript.Alert("您没有权限进行此操作！");
}
} private void DataGridOptLog_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
ListItemType itemType = e.Item.ItemType;
if (itemType == ListItemType.Item )
{

e.Item.Attributes["onmouseout"] = "javascript:this.style.backgroundColor='#dedfde';";
e.Item.Attributes["onmouseover"] = "javascript:this.style.backgroundColor='#fff7ce';cursor='hand';" ; }
else if( itemType == ListItemType.AlternatingItem)
{
e.Item.Attributes["onmouseout"] = "javascript:this.style.backgroundColor='#ffffff';";
e.Item.Attributes["onmouseover"] = "javascript:this.style.backgroundColor='#fff7ce';cursor='hand';" ;
}
} private void DataGridOptLog_PageIndexChanged(object source, System.Web.UI.WebControls.DataGridPageChangedEventArgs e)
{
DataGridOptLog.CurrentPageIndex =e.NewPageIndex ;
MyBindData();
} private void CheckBox2_CheckedChanged(object sender, System.EventArgs e)
{
foreach(DataGridItem thisItem in DataGridOptLog.Items)
{
((CheckBox)thisItem.Cells[0].Controls[1]).Checked = CheckBox2.Checked;
} }
}
}

Answer 7

用Datagrid跟Datalist根本就一样的。
楼上 wj2929(*ヤＲěйヤ*)的方法可以用客户端脚本实现行的颜色变化，但这样一来，就一个删除按钮，他根本就不知道选中的那行记录的id号 是多少，该怎么删除呢？

Answer 8

也很容易解决阿可以通过一个服务器端的hidden（隐藏文本框）实现每次你选择行行时，把此时的id号传给hidden.value,这样在服务器端根据这个值执行删除记录了通过js获得id的方法如下（连同上面给你的代码一起写吧，这里假设id列在第一列）：<script language=jscript>
var color1=....; //这里设定tr的初始颜色
var color2=....; //这里设定tr的选中的颜色
var aa;//选中的行对象
function clicked()
{
  if(aa!=null)
    aa.style.backgroundColor = color1;  //恢复上次选中行的颜色
   var e = window.event.srcElement;
   try
   {
     var p = e.parentElement;
     while (p.tagName.toLowerCase()!= "tr")
       p = p.parentElement;
     aa=p;
     hidden.value=aa.childNodes(0).innerText; //获得id值
     aa.style.backgroundColor = color2;//使当前选中行变色
   }
   catch(e)
   {}
}
</script>注：这里根据id所在的列取id值，比如id列在第n列 上面的取法改为
    hidden.value=aa.childNodes(n-1).innerText; //获得id值

Answer 9

private void InitializeComponent()
{    
this.dataGrid.ItemDataBound += new System.Web.UI.WebControls.DataGridItemEventHandler(this.dataGrid_ItemDataBound);
this.btnDel.Click += new System.EventHandler(this.btnDel_Click);
this.Load += new System.EventHandler(this.Page_Load);
}


//选中变色
private void dataGrid_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
if(e.Item.ItemIndex<0)  return;
if(e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
System.Web.UI.WebControls.CheckBox chkExport; 
chkExport=(CheckBox)e.Item.FindControl("chkExport");
chkExport.Attributes.Add("OnClick","SetCheckBoxState()");
e.Item.Attributes.Add("onmouseover","currentcolor=this.style.backgroundColor;this.style.backgroundColor='FDF0BC'");
e.Item.Attributes.Add("onmouseout","this.style.backgroundColor=currentcolor");
}
}

Answer 10

wj2929(*ヤＲěйヤ*) 兄  我没有把id号显示出来的。那hidden.value=aa.childNodes(0).innerText还对吗？

Answer 11

恩
既然你在服务器端把id列不可见了,那么客户端就不能用js查找了但你可以这样
先参考一下下面简单的代码:
<table border=1>
<tr>
<td style="display=none;">asdf1</td><td>asdf2</td><td>asdf3</td>
</tr>
</table>把你的ID列放入上面的第一个单元格中，而且对这个单元格设置其display=none，这样它也是不可显的，但却能通过js读出来

Answer 12

wj2929(*ヤＲěйヤ*) 兄果然聪明。但是，我的删除按钮（runat=server）点了后，执行服务器端onclick事件代码，我怎么来判断刚才表格里的那么多行，有几个单选按钮被选中呢？

Answer 13

你还要多选阿？那我上面的代码 处理起来就有点麻烦了 ，因为我是假定你只是单选的，通过对行的变色你也可以看出来，即点击当前行，则以前点击的那一行的颜色将会恢复的建议还是用checkbox比较好相关的参考：http://dotnet.aspx.cc/ShowDetail.aspx?id=FF130C7F-3650-4DA6-8943-8AA4AF3E3459