菜鳥學(xué)堂：
在網(wǎng)絡(luò)開發(fā)中，經(jīng)常遇到需要使用asp.net與javascript聯(lián)合進行控制的情況。在本篇中，將使用datagrid進行數(shù)據(jù)綁定，使用javascript控制當選中其中的checkbox時，該行顏色改變。
首先，在頁面中創(chuàng)建一個datagrid控件，并設(shè)置其模板。
<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腳本函數(shù)，進行checkbox的判斷和顏色改變的控制。
<script>
function checkme(obj,tr){
if(obj.checked)
tr.style.backgroundcolor='blue';
else
tr.style.backgroundcolor='';
}
</script>
第三，在page_load事件中為datagrid綁定數(shù)據(jù)，并關(guān)聯(lián)checkbox的javascript腳本。
private void page_load(object sender, system.eventargs e)
{
// put user code to initialize the page here
if(!ispostback)
{
databind();
}
}
private void 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控件，選擇該控件，該行背景顏色變藍色，取消選擇，該行顏色恢復(fù)初始狀態(tài)。
