GridView选定的行颜色更改并在gridview的按钮clientclick上显示一个面板 [英] GridView Selected Row color Change and show a panel on button clientclick of gridview

问题描述

我正在使用一个gridview，其中我已经使用一个按钮作为模板字段.我想更改网格行的背景色，当它被选中并在其clientclick上将显示一个隐藏面板.我想仅通过javascript来做到这一点代码而不是服务器端代码.

谢谢

I am using a gridview in which i have used a button as a template field.I want to change the grid row back color,when it is selected and on its clientclick a hide panel will be show.I want to do this by only javascript code not by server side code.

Thanks

推荐答案

在这里，我给出了您想要的示例代码.

试试这个.

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();

     }
 }

在上面的代码中，我只是获取临时数据来填充数据控制，您可以在其中使用后端技术(sql server，Entity FW，LinqtoSql)
并且在脚本标签中，您需要在下面的代码中编写

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 = '';
     }

这只是为了示例代码对其进行修改以满足您的要求
在上面的代码中，我只是使用id来指定datalist控件中的每一行.

您也可以将相同的逻辑应用于gridview.

我希望你能理解我的所作所为.

如有任何疑问请回来

最好的

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

这篇关于GridView选定的行颜色更改并在gridview的按钮clientclick上显示一个面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！