Hi ,
Here I'm giving sample code for what you want.
Try this.
<asp:datalist id="DataList1" runat="server" width="500" xmlns:asp="#unknown">
<HeaderTemplate >
<table width="100%">
<tr>
<td>ID</td>
</tr>
</HeaderTemplate>
<itemtemplate>
<tr id="Tr1_<%#Eval(">
<td onclick="changecolor('Tr1_<%#Eval(" id=") %>')">
<input type="button" id="btn_<%#Eval("id") %>" onclick="openpanel('Tr_<%#Eval("id") %>')" />
</td>
</tr>
<tr id="Tr_<%#Eval(" style="display:none;">
<td>this is hiding panel</td>
</tr>
</itemtemplate>
<footertemplate>
</footertemplate></table>
</asp:datalist>
In code behind file contains something like this
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
dt.Columns.Add("id");
dt.Columns.Add("name");
dt.Columns.Add("cost");
dt.Columns.Add("pid");
dt.Rows.Add(getnewrow("1", "Total", "0", "0"));
dt.Rows.Add(getnewrow("2", "Wedding Ring", "10000", "1"));
dt.Rows.Add(getnewrow("3", "General", "20000", "1"));
dt.Rows.Add(getnewrow("4", "Transport", "20000", "1"));
dt.Rows.Add(getnewrow("5", "Bride", "20000", "2"));
dt.Rows.Add(getnewrow("6", "Groom", "20000", "2"));
Session["TempData"] = dt;
DataList1.DataSource = (DataTable)Session["TempData"];
DataList1.DataBind();
}
}
In the above code i just take temporary data to fill data control you can use back end technologies in there(sql server,Entity FW,LinqtoSql)
and in Script tags you need to write below code
function changecolor(tid) {
document.getElementById(tid).style.backgroundColor = 'red';
}
function openpanel(tid) {
document.getElementById(tid).style.display = '';
}
And this is just for sample code modify it to achieve your requirement
In the above code i just take id to specify each and every row in datalist control.
You can apply same logic to gridview also.
I hope you understood what i did.
come back if you've any doubts
All the Best