本文介绍了如何在javascript中显示和隐藏td的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在我的应用程序中，我有一个链接按钮。我想在其点击事件中显示和隐藏内容。
我使用了以下代码。
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.
推荐答案
<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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！