如何在javascript中显示和隐藏td [英] how to show and Hide td in javascript

问题描述

在我的应用程序中，我有一个链接按钮。我想在其点击事件中显示和隐藏内容。





我使用了以下代码。

in my application,I have a link button.I want to show and hide contents with in a td on its click event.


I have used the following code .

function DisplayCountry()
{

if(document.getElementById("ctl00_ContentPlaceHolder1_trpopcountry").style.display == "none")
    document.getElementById("ctl00_ContentPlaceHolder1_trpopcountry").style.display = "block";
 else
    document.getElementById("ctl00_ContentPlaceHolder1_trpopcountry").style.display = "none";
return;

}

<tr>
    <td colspan=2 id=trpopcountry  runat="server" style="display:none" >
      <asp:Label ID="lblselcountry_id" runat="server"   Visible=false  ></asp:Label>
    <asp:Label ID="lblselcountry" runat="server"   CssClass="gridtxt"   width="250px" ></asp:Label>

                         <table width="100%" align=left bgcolor=silver border=0   runat=server>
                     <tr  bgcolor="#397fd8">
                     <td>

                     <asp:Label ID=hdr runat=server text="Select"     CssClass="visiter" > </asp:Label>
                      <asp:Label ID=lblhdrcntry runat=server text="Select"     CssClass="visiter" > </asp:Label>
                     </td>
                     <td align=right>
                       <span >
                         <asp:ImageButton id=imgclose runat=server  ImageUrl="~/images/cancel.jpg"  />

                     </span>
                     </td>
                     </tr>
                     <tr><td colspan=2>
                     <table>
                     <tr>
                     <td>
                                 <asp:textbox ID=txtcountrysrch runat=server AutoPostBack=true  Height="20px" Width="250px" >
                                 </asp:textbox>
                                <asp:LinkButton ID=LinkButton3 runat=server text="F"  Visible=false ></asp:LinkButton>
                     </td>
                      <td> <asp:ImageButton id=imgsearch runat=server  ImageUrl="~/images/search.jpeg" Width="20px"  Height="20px" />
                    </td>
                     </tr>
                     </table>

                      </td></tr>
                     <tr><td colspan=2 width=100%>

                     <div id=Div3 runat=server style="height:200px;width:100%;overflow:auto" >
                       <asp:GridView ID="GridView2" runat="server" CellSpacing="1" BackColor="white" Width=99% BorderWidth="1px"   AutoGenerateColumns="False" CellPadding="0"    GridLines ="None" >
                           <HeaderStyle  CssClass="visiter"    VerticalAlign =top BackColor="#397fd8"   />
                            <RowStyle CssClass="vis_con"  />
                                            <Columns>
                                            <asp:TemplateField>
                                            <HeaderTemplate>
                                            <asp:CheckBox ID=chkall runat=server OnCheckedChanged="chkctryall" AutoPostBack=true/>
                                            </HeaderTemplate>
                                            <ItemTemplate>
                                            <asp:CheckBox ID=chk runat=server  OnCheckedChanged="chkctryselected_new"  AutoPostBack=true  />
                                            </ItemTemplate>
                                            </asp:TemplateField>
                                                <asp:TemplateField >
                                                <HeaderTemplate>
                                            <asp:Label runat=server ID=lblhdr Text="All"></asp:Label>
                                            </HeaderTemplate>
                                                     <ItemStyle HorizontalAlign=left />
                                                    <ItemTemplate >
                                                     <asp:Label ID="id" runat="server"    Visible=false  Text='<%#DataBinder.Eval(Container.DataItem, "id")%>'>  </asp:Label>
                                                         <asp:Label ID="name" runat="server"    Text='<%#DataBinder.Eval(Container.DataItem, "name")%>'  CssClass="gridtxt" >  </asp:Label>
                                                     </ItemTemplate>
                                                </asp:TemplateField>
                                            </Columns>
                                        </asp:GridView>
                                             </div>
                     </td></tr>



                     </table>
    </td></tr>

服务器端：



country.Attributes.Add（onclick，DisplayCountry（）;）





除此之外我什么也没做。



点击事件之后。这个java脚本正在触发（此时，td正在显示）然后页面加载事件被触发（此时，td是可见的.then

server side :

country.Attributes.Add("onclick", "DisplayCountry();")


other than this i did nothing.

After the click event.This java script is firing(at this time ,the td is comming to visible )then the page load event is firing(at this time ,the td is in visible ).then

function srchOK()
 {
 var pr=document.getElementById('<%=btnsearch.ClientId %>')
 pr.click();
}

射击。此后td再次无形。



但是我想把它设置为可见。



如果我在服务器端处理这个点击事件，也就是说，在它的点击事件中，它工作正常。

我想在客户端使用它。



请指导我解决这个问题。

firing.After this the td is again going to invisible.

but i want to set it to visible.

If i am handling this click event in server side,that is ,in its click event,it is working fine.
I want to use this in client side.

kindly guide me to resolve this issue.

推荐答案

隐藏c＃代码中的td。 trpopcountry.visible = false

Hi,

Hide the td in c# code. trpopcountry.visible=false

您好b $ b尝试对代码进行此示例更改..

Hi Try this sample changes on your code..

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function DisplayCountry() {

            var trpopcountry = document.getElementById("trpopcountry");
            if (trpopcountry.style.display == "none")
                trpopcountry.style.display = "block";
            else
                trpopcountry.style.display = "none";
            return;

        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:LinkButton ID="lnk" runat="server" OnClientClick="DisplayCountry(); return false;"

        Text="SHow-Hide"></asp:LinkButton>
    <div>
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td colspan="2" id="trpopcountry" runat="server" style="display: none">
                    <asp:Label ID="lblselcountry_id" runat="server" Visible="false"></asp:Label>
                    <asp:Label ID="lblselcountry" runat="server" CssClass="gridtxt" Width="250px"></asp:Label>
                    <table id="Table1" width="100%" align="left" bgcolor="silver" border="0" runat="server">
                        <tr bgcolor="#397fd8">
                            <td>
                                your
                                <br />
                                content<br />
                                here
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

这篇关于如何在javascript中显示和隐藏td的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！