在表格内显示/隐藏 tbody 标签答案

【问题标题】：Show/Hide tbody tag inside table在表格内显示/隐藏 tbody 标签
【发布时间】：2016-05-14 13:10:40
【问题描述】：

我有一个包含 2 个 tbody 的 html 表，我试图根据下拉列表中选择的特定值显示/隐藏。

问题是当我使用 JS 隐藏第一个 tbody 并显示第二个 tbody 时，它已被最小化，就像附图中一样。

第一主体

第二个主体

            <table class="timecardinfotable">
                <colgroup>
                    <col style="width:95px" />
                </colgroup>

                <tbody>
               
                <tr>
                    <td>
                        Work Dept.:
                    </td>
                        <td>
                             <telerik:RadComboBox ID="rcbWorkDept" runat="server" AppendDataBoundItems="true" Text='<%# DataBinder.Eval(Container, "DataItem.LocationPostName") %>' DataTextField="LocationPostName"  EmptyMessage="Select Work Department"  Width="240px" AutoPostBack="True" MarkFirstMatch="True"  AllowCustomText="true" EnableTextSelection="true" ></telerik:RadComboBox>
                             <telerik:RadTextBox ID="txtWordDepID" runat="server"  Text='<%# DataBinder.Eval(Container, "DataItem.EmployeeLocationID") %>' Width="240px" Visible="false"></telerik:RadTextBox> 
                        </td>
                        <td>&nbsp;</td>
                </tr>
                
                <tr>
                    <td>
                        Employee #:
                    </td>
                        <td>
                            <telerik:RadComboBox ID="rcbEmployees" runat="server" AppendDataBoundItems="true" Text='<%# DataBinder.Eval(Container, "DataItem.EmployeeNameAndNumber") %>' EmptyMessage="Select Employee"  Width="240px" AutoPostBack="False" MarkFirstMatch="True"  AllowCustomText="true" EnableTextSelection="true"></telerik:RadComboBox>
                            <telerik:RadTextBox ID="txtEmployeeNumber" runat="server"  Text='<%# DataBinder.Eval(Container, "DataItem.EmployeeNumber") %>' Width="240px" Visible="false"></telerik:RadTextBox> 
                        </td>
                        <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>
                        Category:
                    </td>
                     <td>
                         <telerik:RadComboBox ID="rcbTransactionCategory" runat="server" AppendDataBoundItems="true" Text='<%# DataBinder.Eval(Container, "DataItem.AttendanceTransactionCategory") %>' DataTextField="AttendanceTransactionCategory"  EmptyMessage="Select Category"  Width="240px" AutoPostBack="False" OnClientSelectedIndexChanged="HideOptions"></telerik:RadComboBox>
                     </td>
                     <td>&nbsp;</td>
                </tr>
                </tbody>

                <tbody id="tbodytransactions" runat="server" class="bodytransactions">
               
                <tr>
                    <td style="vertical-align:top;">
                        Clock In:
                    </td>
                    <td colspan="2"> 
                       <telerik:RadDateTimePicker ID="rdtpClockIn" runat="server" DbSelectedDate='<%# DataBinder.Eval(Container, "DataItem.ClockInDateTime") %>' Width="192px">
                             <Calendar ID="calanderClockIn" runat="server" EnableKeyboardNavigation="True">
                                <SpecialDays>
                                    <telerik:RadCalendarDay Repeatable="Today" Date="" ItemStyle-BackColor="lightblue"></telerik:RadCalendarDay>
                                 </SpecialDays>
                             </Calendar> 
                            <DateInput ID="diClockIn" ToolTip="ClockIn Date input" runat="server"/>   
                       </telerik:RadDateTimePicker>

                       <asp:HiddenField ID="hfClockInID" Value='<%# Eval("ClockInID") %>' runat="server"  />

                       <telerik:RadButton ID="rbClockInPictureComments" runat="server" AutoPostBack="true" Height="22px" Width="22px" ToolTip="Clock In - Picture and Comments" Enabled="True" CommandName="GetClockInPictureComments">
                          <Icon PrimaryIconUrl="../../Images/Icons/TransactionInfo.png" PrimaryIconLeft="4" PrimaryIconTop="4"></Icon>
                       </telerik:RadButton>

                       <telerik:RadButton ID="rbClockInAdjusmentReason" runat="server" AutoPostBack="false" Height="22px" Width="22px" ToolTip="Clock In - Reason For Adjusment" Enabled="True" OnClientClicked="ClockInReasonForAdjustment">
                          <Icon PrimaryIconUrl="../../Images/Icons/AdjustmentReason.png" PrimaryIconLeft="4" PrimaryIconTop="4"></Icon>
                       </telerik:RadButton>
                       <div id="divclockinreason" runat="server" class="clockinreason">
                            <telerik:RadTextBox ID="txtClockInAdjusmentReason" runat="server" AutoPostBack="false" Width="242px" MaxLength="100" EmptyMessage="Clock In - Reason For Adjusment"  Text='<%# DataBinder.Eval(Container, "DataItem.ClockInReasonForAdjustment") %>'></telerik:RadTextBox> 
                       </div>
                    </td>
                </tr>
                <tr>
                    <td style="vertical-align:top;">
                        Start Break:
                    </td>
                    <td colspan="2"> 
                        <telerik:RadDateTimePicker ID="rdtpStartBreak" runat="server" DbSelectedDate='<%# DataBinder.Eval(Container, "DataItem.StartBreakDateTime") %>' Width="192px">
                        <Calendar ID="calanderStartBreak" runat="server" EnableKeyboardNavigation="True">
                                <SpecialDays>
                                    <telerik:RadCalendarDay Repeatable="Today" Date="" ItemStyle-BackColor="lightblue"></telerik:RadCalendarDay>
                                 </SpecialDays>
                             </Calendar> 
                            <DateInput ID="diStartBreak" ToolTip="Start Break Date input" runat="server"/>   
                        </telerik:RadDateTimePicker>
                        <asp:HiddenField ID="hfStartBreakID" Value='<%# Eval("StartBreakID") %>' runat="server"  />     
                        
                       <telerik:RadButton ID="rbStartBreakPictureComments" runat="server" AutoPostBack="true" Height="22px" Width="22px" ToolTip="Start Break - Picture and Comments" Enabled="True" CommandName="GetStartBreakPictureComments">
                          <Icon PrimaryIconUrl="../../Images/Icons/TransactionInfo.png" PrimaryIconLeft="4" PrimaryIconTop="4"></Icon>
                       </telerik:RadButton>

                       <telerik:RadButton ID="rbStartBreakAdjusmentReason" runat="server" AutoPostBack="false" Height="22px" Width="22px" ToolTip="Start Break - Reason For Adjusment" Enabled="True" OnClientClicked="StartBreakReasonForAdjustment">
                          <Icon PrimaryIconUrl="../../Images/Icons/AdjustmentReason.png" PrimaryIconLeft="4" PrimaryIconTop="4"></Icon>
                       </telerik:RadButton>

                      <div id="divstartbreakreason" runat="server" class="startbreakreason">
                         <telerik:RadTextBox ID="txtStartBreakAdjusmentReason"  runat="server" Width="242px" MaxLength="100" EmptyMessage="Start Break - Reason For Adjusment" Text='<%# DataBinder.Eval(Container, "DataItem.StartBreakReasonForAdjustment") %>'></telerik:RadTextBox>
                       </div>                                    
                    </td>
                </tr>
                <tr>
                    <td style="vertical-align:top;">
                        End Break:
                    </td>
                    <td colspan="2"> 
                        <telerik:RadDateTimePicker ID="rdtpEndBreak" runat="server" DbSelectedDate='<%# DataBinder.Eval(Container, "DataItem.EndBreakDateTime") %>' Width="192px">
                         <Calendar ID="calanderEndBreak" runat="server" EnableKeyboardNavigation="True">
                            <SpecialDays>
                              <telerik:RadCalendarDay Repeatable="Today" Date="" ItemStyle-BackColor="lightblue"></telerik:RadCalendarDay>
                            </SpecialDays>
                          </Calendar> 
                         <DateInput ID="diEndBreak" ToolTip="End Break Date input" runat="server"/>   
                        </telerik:RadDateTimePicker>
                        <asp:HiddenField ID="hfEndBreakID" Value='<%# Eval("EndBreakID") %>' runat="server"  /> 
                        
                         <telerik:RadButton ID="rbEndBreakPictureComments" runat="server" AutoPostBack="true" Height="22px" Width="22px" ToolTip="End Break - Picture and Comments" Enabled="True" CommandName="GetEndBreakPictureComments">
                             <Icon PrimaryIconUrl="../../Images/Icons/TransactionInfo.png" PrimaryIconLeft="4" PrimaryIconTop="4"></Icon>
                         </telerik:RadButton>
                         
                        <telerik:RadButton ID="rbEndBreakAdjusmentReason" runat="server" AutoPostBack="false" Height="22px" Width="22px" ToolTip="End Break - Reason For Adjusment" Enabled="True" OnClientClicked="EndBreakReasonForAdjustment">
                          <Icon PrimaryIconUrl="../../Images/Icons/AdjustmentReason.png" PrimaryIconLeft="4" PrimaryIconTop="4"></Icon>
                       </telerik:RadButton>

                       <div id="divendbreakreason" runat="server" class="endbreakreason">
                       <telerik:RadTextBox ID="txtEndBreakAdjusmentReason"  runat="server" Width="242px" MaxLength="100" EmptyMessage="End Break - Reason For Adjusment" Text='<%# DataBinder.Eval(Container, "DataItem.EndBreakReasonForAdjustment") %>'></telerik:RadTextBox>
                       </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        Clock Out:
                    </td>
                    <td colspan="2"> 
                        <telerik:RadDateTimePicker ID="rdtpClockOut" runat="server" DbSelectedDate='<%# DataBinder.Eval(Container, "DataItem.ClockOutDateTime") %>' Width="192px">
                          <Calendar ID="calanderClockOut" runat="server" EnableKeyboardNavigation="True">
                            <SpecialDays>
                              <telerik:RadCalendarDay Repeatable="Today" Date="" ItemStyle-BackColor="lightblue"></telerik:RadCalendarDay>
                            </SpecialDays>
                          </Calendar> 
                         <DateInput ID="diClockOut" ToolTip="Clock ut Date input" runat="server"/>  
                        </telerik:RadDateTimePicker>
                        <asp:HiddenField ID="hfClockOutID" Value='<%# Eval("ClockOutID") %>' runat="server"  /> 
                        
                         <telerik:RadButton ID="rbClockOutPictureComments" runat="server" AutoPostBack="true" Height="22px" Width="22px" ToolTip="Clock Out - Picture and Comments" Enabled="True" CommandName="GetClockOutPictureComments">
                             <Icon PrimaryIconUrl="../../Images/Icons/TransactionInfo.png" PrimaryIconLeft="4" PrimaryIconTop="4"></Icon>
                         </telerik:RadButton>
                         
                        <telerik:RadButton ID="rbClockOutAdjusmentReason" runat="server" AutoPostBack="false" Height="22px" Width="22px" ToolTip="Clock Out - Reason For Adjusment" Enabled="True" OnClientClicked="ClockOutReasonForAdjustment">
                          <Icon PrimaryIconUrl="../../Images/Icons/AdjustmentReason.png" PrimaryIconLeft="4" PrimaryIconTop="4"></Icon>
                       </telerik:RadButton>
                       <div id="divclockoutreason" runat="server" class="clockoutreason"> 
                          <telerik:RadTextBox ID="txtClockOutAdjusmentReason"  runat="server" Width="242px" MaxLength="100" EmptyMessage="Clock Out - Reason For Adjusment" Text='<%# DataBinder.Eval(Container, "DataItem.ClockOutReasonForAdjustment") %>'></telerik:RadTextBox>        
                      </div>
                    </td>
                </tr>
                </tbody>

                <tbody id="tbodycategorized" runat="server" class="bodycategorized" style="border:1px solid red">
                    <tr>
                        <td>
                            Work Day:
                        </td>
                        <td colspan="2">
                           <telerik:RadDatePicker ID="rdpWorkDay" runat="server" Width="120px" AutoPostBack="false">
                             <Calendar ID="fromCalendar" runat="server" EnableKeyboardNavigation="True">
                                <SpecialDays>
                                    <telerik:RadCalendarDay Repeatable="Today" Date="" ItemStyle-BackColor="lightblue"></telerik:RadCalendarDay>
                                 </SpecialDays>
                             </Calendar> 
                            <DateInput ID="diWorkDay" ToolTip="From Date input" runat="server"/>      
                           </telerik:RadDatePicker>  
                           <telerik:RadTimePicker ID="rtpWorkTime" runat="server" DateInput-DateFormat="HH:mm" TimeView-TimeFormat="HH:mm" Width="90px"></telerik:RadTimePicker>

                        </td>
                       
                    </tr>
                
                </tbody>

            </table>





<!-- begin snippet: js hide: false -->

        function HideOptions(sender,eventArgs) {
            var item = eventArgs.get_item();
            var ClockIn = $find("<%=rdtpClockIn.ClientID %>");
            var ClockOut = $find("<%=rdtpClockOut.ClientID %>");
            var StartBreak = $find("<%=rdtpStartBreak.ClientID %>");
            var EndBreak = $find("<%=rdtpEndBreak.ClientID %>");
            var tbodytransactions = document.getElementById("<%=tbodytransactions.ClientID%>");
            var tbodycategorized = document.getElementById("<%=tbodycategorized.ClientID%>");
             if (item.get_text() === "Sick") {
                 //Hide all the options.
                 tbodytransactions.style.display = "none";
                 tbodycategorized.style.display = "block";
             } else if (item.get_text() === "Regular") {
                 tbodytransactions.style.display = "block";
                 tbodycategorized.style.display = "none";
             }
         }

【问题讨论】：

尝试：tbodycategorized.style.visibility = "hidden";
我不确定这是否是问题所在，但请为您使用 $find 访问的 HTML 元素设置 ClientIDMode=Static。这允许您使用分配给元素的ID，而不必使用("<%=tbodytransactions.ClientID%>");
Rana* 使用隐藏可见性在第一个 tbody 和第二个 tbody 之间创建了一个巨大的空间
@MarkZu 可能是 CSS 的问题？为“bodycategorized”和“bodytransactions”类添加 CSS 代码
.bodytransactions { 显示：块； } .bodycategorized { 显示：无； }

标签： javascript html css asp.net

【解决方案1】：

为 tbody 的每个部分创建单独的 div，并使用 display:none 进行 stilish

伪：

function select(){
    if(dropDown select 1) {
        document.getElementById(div1).style.display = 'none';
        document.getElementById(div2).style.display = 'block';
    } else if(dropDown select 2) {
        document.getElementById(div1).style.display = 'block';
        document.getElementById(div2).style.display = 'none';
    }
}

【讨论】：

你确定我可以在 tbody 中创建一个 div 吗？我创建了 tbody 以避免在表格中使用嵌套 div。
我认为关键是，您想显示表格中包含的元素，但我认为这不是最佳方式...因为表格应该在那里创建空间，而不是显示或显示下来，在这种情况下，您应该在表格中添加一个新行...您必须封装要显示的内容：