在用户提交之前隐藏 HTML 元素

Hide HTML elements before user submission

本文关键字：隐藏 HTML 元素 用户 提交      更新时间：2023-09-26

>我有一个 Web 表单，用户在其中选择一个日期范围，并将数据绑定到网格视图。当我运行 Web 表单时，将显示每个网格的标题及其导出为 excel 文件的选项。 有没有办法在HTML中隐藏这些元素，直到用户选择数据范围并且出现DataGrids？例

"报告文本"是每个数据网格的标题。有没有办法在用户提交日期之前隐藏导出按钮和标题？日期字段是一个javascript日期选择器，我试图看看问题是否出在javascript或HTML本身。

编辑：我将添加我的HTML代码

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

<style type="text/css">
    .auto-style1 {
        width: 382px;
        height: 96px;
    }
</style>
</head>
<body>
    <form id="form1" runat="server"
 <meta http-equiv="content-type" content="text/html"; charset="utf-8" />
    <link rel="stylesheet"
        href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
        <script type="text/javascript" lang="javascript">
            $(function () {
                $("#<%=TextDateFrom.ClientID %>").datepicker({
                    changeMonth: true,
                    changeYear: true,
                    changeDate: true,
                });
            });
            $(function(){
                $("#<%=TextDateTo.ClientID %>").datepicker({
                    changeMonth: true,
                    changeYear: true,
                    changeDate: true,
                });
            });
</script>
     <asp:Label ID="Header" runat="server"><b>Tax Report App</b>  </asp:Label>
 <br />
 <br />
 <br />
<asp:Label ID="StartDate" runat="server">Begin Date:   </asp:Label>
<asp:TextBox ID="TextDateFrom" runat="server"></asp:TextBox><br />
<asp:Label ID="EndDate" runat="server"> End Date:   </asp:Label>
<asp:TextBox ID="TextDateTo" runat="server"></asp:TextBox><br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Submit" />
<br />
<br />
<br />
    <asp:Label ID="Label1" runat="server">Report Text  </asp:Label>
<asp:GridView ID ="GridViewCS" runat="server" AutoGenerateColumns ="false">  
<HeaderStyle BackColor="#3090C7" Font-Bold="True" ForeColor="White" /> 
    <Columns>
        <asp:BoundField DataField="State" HeaderText="State" ItemStyle- Width="200px" />
        <asp:BoundField DataField="Total" HeaderText="Total Tax" ItemStyle-Width="200px" />
        <asp:BoundField DataField="Total Sales" HeaderText="Total Sales" ItemStyle-Width="200px" />
        <asp:BoundField DataField="Complete Total" HeaderText="Total with Tax" ItemStyle-Width="200px" />
</Columns>
    </asp:GridView>
    <br />
   <asp:Button class="initial-hide" ID="btnExport" runat="server" Text="Export To Excel" OnClick = "ExportToExcel" />
 <br />
 <br />
  <br />
  <br />
        <asp:Label ID="Label3" runat="server">Report Text   </asp:Label>
         <asp:GridView ID ="GridView2" runat="server" AutoGenerateColumns ="false">  
    <HeaderStyle BackColor="#3090C7" Font-Bold="True" ForeColor="White" /> 
    <Columns>
        <asp:BoundField DataField="FL" HeaderText="State FL" ItemStyle-Width="200px" />
        <asp:BoundField DataField="Total FL" HeaderText="Sales Tax Amount FL" ItemStyle-Width="200px" />
        <asp:BoundField DataField="Total Sales" HeaderText="Tax Exemption FL" ItemStyle-Width="200px" />
        <asp:BoundField DataField="Complete Total" HeaderText="Total Sales FL" ItemStyle-Width="200px" />
</Columns>
</asp:GridView>
<br />
 <asp:Button ID="Button2" runat="server" Text="Export To Excel" OnClick =    "ExportToExcelFL" />
<div>
</div>
   </form>
</body>
</html>

你可以使用 jQuery 的 Hide（） 和 Show（） 效果来隐藏和显示元素

相关文章：