ASP.NET与JavaScript联合操作之一 选择DataGrid中的CheckBox控件后该行背景变色
在網絡開發中,經常遇到需要使用ASP.NET與JavaScript聯合進行控制的情況。在本篇中,將使用DataGrid進行數據綁定,使用Javascript控制當選中其中的checkbox時,該行顏色改變。
首先,在頁面中創建一個DataGrid控件,并設置其模板。
<asp:DataGrid id="DataGrid1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<asp:CheckBox id="checkbox1" Runat ="server"></asp:CheckBox>
<asp:Label? runat="server" Text='<%# DataBinder.Eval(Container, "DataItem") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
第二,在頁面中的<head></head>中編寫JavaScript腳本函數,進行CheckBox的判斷和顏色改變的控制。
???<script>??
?? function checkme(obj,tr){
?? if(obj.checked)
????? tr.style.backgroundColor='blue';
???else
????? tr.style.backgroundColor='';
??? }
??? </script>?
第三,在Page_Load事件中為DataGrid綁定數據,并關聯CheckBox的JavaScript腳本。
private void Page_Load(object sender, System.EventArgs e)
{
?// Put user code to initialize the page here
?if(!IsPostBack)
?{
??databind();
?}
}
{
?ArrayList arr=new ArrayList();
?arr.Add("新聞綜合");
?arr.Add("綜藝");
?arr.Add("電影");
?arr.Add("教育");
?arr.Add("戲劇");
?arr.Add("軍事");
?arr.Add("體育");
?DataGrid1.DataSource=arr;
?DataGrid1.DataBind();??
?int i;
?for(i=0;i<DataGrid1.Items.Count;i++){
??CheckBox cb;
??cb=(CheckBox)DataGrid1.Items[i].FindControl("checkbox1");?
??DataGrid1.Items[i].Attributes.Add("id","tr" + i.ToString());
??cb.Attributes.Add("onclick","checkme(this,tr" + i.ToString() + ");");
?}
}
第四,完成之后運行程序。程序運行后,會在DataGrid控件的每行前顯示一個CheckBox控件,選擇該控件,該行背景顏色變藍色,取消選擇,該行顏色恢復初始狀態。
轉載于:https://www.cnblogs.com/yan0837/archive/2005/08/26/223276.html
總結
以上是生活随笔為你收集整理的ASP.NET与JavaScript联合操作之一 选择DataGrid中的CheckBox控件后该行背景变色的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: [转贴]玩你没商量:ADSL速率数字游戏
- 下一篇: .Net 实用技术收藏!!!