在表格中显示/隐藏tbody标签
我有一个带有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> </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> </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> </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";
}
}
1 个答案:
答案 0 :(得分：0)
为tbody的每个部分创建分隔的div，并使用display：none
来显示<强>伪：
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';
}
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？