none
怎么利用javascript隐藏或显示formview某行??请孟兄赐教! RRS feed

  • 问题

  • <script language="JavaScript" type="text/javascript"> 
    function view()
       {
    点击隐藏formview中的某一行,怎么实现???
       }
    </script>
    <input id="Button1" type="button" value="显示详细信息" style="width:100px;"   size="100px"  onclick="javascript:view();" />

     <asp:FormView  ID="formview1" DataKeyNames="ItemCode" DataSourceID="form" runat="server">
            <ItemTemplate>
                <asp:Table ID="Table1" runat="server" >
             <asp:TableRow id="tr1">
                            <asp:TableCell HorizontalAlign="Left" ColumnSpan="3" Width="380px" >
                    <asp:Label ID="BidUser" Width="95%" Text='<%# Eval("BidUser") %>'  runat="server"></asp:Label></asp:TableCell>
                      </asp:TableRow>
    </ItemTemplate>
    </asp:Table>
    </asp:FormView >
    2009年3月27日 9:35

答案

  • 这些代码最终生成的就是html的table,可以这样

    <script language="JavaScript" type="text/javascript">
    
      function view() {
    
        document.getElementById('<%=formview1.ClientID %>_tr2').style.display = 'none'
    
      }
    
    </script>
    
    <br/>
    
    
    明白了原理,可以改变其他的方法进行控制

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
    
      protected void formview1_DataBound(object sender, EventArgs e)
      {
    
      }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
    </head>
    <body>
      <form id="form1" runat="server">
      <asp:FormView ID="formview1" DataSourceID="SqlDataSource1" runat="server" AllowPaging="true"
        OnDataBound="formview1_DataBound">
        <ItemTemplate>
          <asp:Table ID="Table1" runat="server">
            <asp:TableRow ID="tr1" runat="server">
              <asp:TableCell HorizontalAlign="Left" Width="380px">
                <asp:Label ID="BidUser" Width="95%" Text='<%# Eval("CategoryName") %>' runat="server"></asp:Label></asp:TableCell>
            </asp:TableRow>
            <asp:TableRow ID="tr2" runat="server">
              <asp:TableCell HorizontalAlign="Left" Width="380px">
                <asp:Label ID="Label1" Width="95%" Text='<%# Eval("CategoryName") %>' runat="server"></asp:Label></asp:TableCell>
            </asp:TableRow>
            <asp:TableRow ID="tr3" runat="server">
              <asp:TableCell HorizontalAlign="Left" Width="380px">
                <asp:Label ID="Label2" Width="95%" Text='<%# Eval("CategoryName") %>' runat="server"></asp:Label></asp:TableCell>
            </asp:TableRow>
          </asp:Table>
        </ItemTemplate>
      </asp:FormView>
      <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Data Source=.;Initial Catalog=Northwind;Integrated Security=True"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT [CategoryID], [CategoryName] FROM [Categories]">
      </asp:SqlDataSource>
      </form>
    
    <script language="JavaScript" type="text/javascript">
      function view() {
        document.getElementById('<%=formview1.ClientID %>_tr2').style.display = ''
      }
    
      function hide() {
        document.getElementById('<%=formview1.ClientID %>_tr2').style.display = 'none'
      }
    </script>
    <input id="Button1" type="button" value="显示" style="width:100px;"   size="100px"  onclick="javascript:view();" />
    <input id="Button1" type="button" value="隐藏" style="width:100px;"   size="100px"  onclick="javascript:hide();" />
    </body>
    </html>
    



    孟宪会
    2009年3月28日 9:53
    版主

全部回复

  • 这些代码最终生成的就是html的table,可以这样

    <script language="JavaScript" type="text/javascript">
    
      function view() {
    
        document.getElementById('<%=formview1.ClientID %>_tr2').style.display = 'none'
    
      }
    
    </script>
    
    <br/>
    
    
    明白了原理,可以改变其他的方法进行控制

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
    
      protected void formview1_DataBound(object sender, EventArgs e)
      {
    
      }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
    </head>
    <body>
      <form id="form1" runat="server">
      <asp:FormView ID="formview1" DataSourceID="SqlDataSource1" runat="server" AllowPaging="true"
        OnDataBound="formview1_DataBound">
        <ItemTemplate>
          <asp:Table ID="Table1" runat="server">
            <asp:TableRow ID="tr1" runat="server">
              <asp:TableCell HorizontalAlign="Left" Width="380px">
                <asp:Label ID="BidUser" Width="95%" Text='<%# Eval("CategoryName") %>' runat="server"></asp:Label></asp:TableCell>
            </asp:TableRow>
            <asp:TableRow ID="tr2" runat="server">
              <asp:TableCell HorizontalAlign="Left" Width="380px">
                <asp:Label ID="Label1" Width="95%" Text='<%# Eval("CategoryName") %>' runat="server"></asp:Label></asp:TableCell>
            </asp:TableRow>
            <asp:TableRow ID="tr3" runat="server">
              <asp:TableCell HorizontalAlign="Left" Width="380px">
                <asp:Label ID="Label2" Width="95%" Text='<%# Eval("CategoryName") %>' runat="server"></asp:Label></asp:TableCell>
            </asp:TableRow>
          </asp:Table>
        </ItemTemplate>
      </asp:FormView>
      <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Data Source=.;Initial Catalog=Northwind;Integrated Security=True"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT [CategoryID], [CategoryName] FROM [Categories]">
      </asp:SqlDataSource>
      </form>
    
    <script language="JavaScript" type="text/javascript">
      function view() {
        document.getElementById('<%=formview1.ClientID %>_tr2').style.display = ''
      }
    
      function hide() {
        document.getElementById('<%=formview1.ClientID %>_tr2').style.display = 'none'
      }
    </script>
    <input id="Button1" type="button" value="显示" style="width:100px;"   size="100px"  onclick="javascript:view();" />
    <input id="Button1" type="button" value="隐藏" style="width:100px;"   size="100px"  onclick="javascript:hide();" />
    </body>
    </html>
    



    孟宪会
    2009年3月28日 9:53
    版主
  • <script runat="server">

      protected void formview1_DataBound(object sender, EventArgs e)
      {

      }
    </script>
     OnDataBound="formview1_DataBound"
    孟兄,这个用法怎么讲?没明白?绑定不是在服务器端吗?客户端也可以?能给讲一下吗?
    还有我刚才试了一下,如果我默认是隐藏的,也就是在服务器端就隐藏了( <asp:TableRow ID="tr2" visible="false" runat="server">
    ),客户端是无论如何也显示不出来的,对吧?
    2009年3月30日 1:28
  • 还有我在点显示的同时,想把<input id="Button1" type="button" value="显示" style="width:100px;"   size="100px"  onclick="javascript:view();" 给隐藏,但我是把它放在table里面
    <asp:Table runat="server" ID="table" Width="800px">
            <asp:TableRow id="tr">
                          <asp:TableCell id="tc" HorizontalAlign="Right">
                <input id="Button1" type="button" value="显示" style="width:100px;"   size="100px"  onclick="javascript:view();" />
                 <input id="Button2" type="button" value="隐藏" style="width:100px;"   size="100px"  onclick="javascript:hide();" />
                </asp:TableCell>
            </asp:TableRow>
        </asp:Table>
    我改如何引用?不好意思,孟兄,一直麻烦你!

    2009年3月30日 1:37
  • '<%=formview1.ClientID %>_tr2',孟兄,_tr2这是一种什么用法?那里有相关资料介绍?
    2009年3月30日 2:02
  • 孟兄,有时间请指点一下!
    2009年3月30日 8:38
  • 楼主,你好

    < script runat = "server" >

      protected void formview1_DataBound(object sender, EventArgs e)
      {

      }
    </ script >
    你看代码仔细点,这个是运行在服务器端的,当绑定数据的时候发生。< script runat = "server" >这个就是用来标记表明是运行在服务器端的。
    至于你放在table中是一样的用法,不过你不要用服务器控件,用html 的table。

    '<%=formview1.ClientID %>_tr2'是内联代码的一种写法,其中 <%=formview1.ClientID %>表示formview在浏览器端的id。

    最后给你个建议,不要在同一个帖子里提出很多问题,因为一个帖子一个问题有助于突出主题,便于相关专家注意,有助于你的问题的解决。

    Microsoft Online Community Support
    2009年3月31日 4:02
  • < script runat = "server" >

      protected void formview1_DataBound(object sender, EventArgs e)
      {

      }
    </ script >
     OnDataBound = "formview1_DataBound"
    孟兄,这个用法怎么讲?没明白?绑定不是在服务器端吗?客户端也可以?能给讲一下吗?
    还有我刚才试了一下,如果我默认是隐藏的,也就是在服务器端就隐藏了( < asp : TableRow ID = "tr2" visible="false"   runat = "server" >
    ),客户端是无论如何也显示不出来的,对吧?
     OnDataBound = "formview1_DataBound"这段是我点多了,在这里没有用处的。

    不要再服务器端使用
    visible="false" 进行隐藏,在服务器端使用 visible="false" 隐藏,客户端不输出内容。你需要使用style="display:none"进行隐藏
    孟宪会
    2009年3月31日 4:43
    版主
  • 还有我在点显示的同时,想把< input id = "Button1" type = "button" value = "显示" style = "width:100px;"    size = "100px"   onclick = "javascript:view();" 给隐藏,但我是把它放在table里面
    <asp:Table runat="server" ID="table" Width="800px">
            <asp:TableRow id="tr">
                          <asp:TableCell id="tc" HorizontalAlign="Right">
                <input id="Button1" type="button" value="显示" style="width:100px;"   size="100px"  onclick="javascript:view();" />
                 <input id="Button2" type="button" value="隐藏" style="width:100px;"   size="100px"  onclick="javascript:hide();" />
                </asp:TableCell>
            </asp:TableRow>
        </asp:Table>
    我改如何引用?不好意思,孟兄,一直麻烦你!

    你是每行里面都有一个“显示”,“隐藏”按钮吗?
    每行里面都加的话,如果隐藏了,就无法让它显示了啊,因为显示按钮隐藏掉了。你的做法存在思路问题。

    孟宪会
    2009年3月31日 4:46
    版主
  • 归根到底,其实就是使用Html DOM的方法进行操作客户端的html元素,搞web页面开发,html,css,js必须先比较熟悉,才能做到运用自如。
    孟宪会
    2009年3月31日 4:48
    版主
  • 谢谢!谢谢两位,我一直在努力学习,苦于起点比较低,又没有时间去仔细的看书!很感谢你们的耐心指导!
    2009年4月1日 1:03