具有行跨度的隐藏表列

我有一个2行4列的表。第一个和最后一个td是rowspan =“2”。在第一列我有2个单选按钮。当我点击第一个第二列应该隐藏，第三个应该是可见的，反之亦然。因为它有行跨度TD：第n个孩子（2）“）显示（）无法正常工作，请帮助具有行跨度的隐藏表列

$(document).ready(function() { 
 
    var check = $("#RadioDiv input:radio:checked").val() 
 
    if (check == 'Date Wise') { 
 
    $('#tblmenubar td:nth-child(2)').show(); 
 
    $('#tblmenubar td:nth-child(3)').hide(); 
 
    } else { 
 
    $('#tblmenubar td:nth-child(2)').hide(); 
 
    $('#tblmenubar td:nth-child(3)').show(); 
 
    } 
 
    $('#RadioDiv input').click(function() { 
 
    var checktype = $("#RadioDiv input:radio:checked").val() 
 
     // alert(checktype); 
 
    if (checktype == 'Year Wise') { 
 
     $('#tblmenubar td:nth-child(3)').show(); 
 
     $('#tblmenubar td:nth-child(2)').hide(); 
 
     //alert('year check'); 
 
    } else { 
 
     $('#tblmenubar td:nth-child(2)').show(); 
 
     $('#tblmenubar td:nth-child(3)').hide(); 
 
     //alert('date check'); 
 
    } 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 
<div id="menubar"> 
 
    <table id="tblmenubar" border="bold"> 
 
    <tr> 
 
     <td align="left" rowspan="2"> 
 
     <div id="RadioDiv"> 
 
      <input type="radio" name="type" value="Year Wise">Year Wise 
 
      <br> 
 
      <input type="radio" name="type" value="Date Wise">Date Wise 
 

 
      <!-- <asp:RadioButtonList ID="rbyeardate" runat="server"> 
 
        <asp:ListItem Selected="True">Year Wise</asp:ListItem> 
 
        <asp:ListItem>Date Wise</asp:ListItem> 
 
       </asp:RadioButtonList> --> 
 

 
     </div> 
 
     </td> 
 
     <td>Start Date: 
 
     <div style="float: right;" id='jqxDateTimeInputstart'> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     Year: 
 
     </td> 
 
     <td rowspan="2"> 
 
     <input id="btntrial" type="button" value="Submitt" /> 
 
     </td> 
 

 
    </tr> 
 
    <tr> 
 
     <td>End Date: 
 
     <div style="float: right;" id='jqxDateTimeInputend'> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <asp:DropDownList ID="dlFiscalYear" runat="server"> 
 
      <asp:ListItem>2013</asp:ListItem> 
 
     </asp:DropDownList> 
 
     <div style="float: left;" id="jqxDropDownListYear"> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>

来源

2014-10-05 Jinesh Sam

嗨，我看你是新来的SO。如果您觉得答案可以解决问题，请点击绿色复选标记将其标记为“已接受”。这有助于将注意力集中在仍然没有答案的旧版SO上。 – dreyescat 2014-10-06 15:33:54

是的，我是新来的。我没有看到任何绿色的复选标记来接受答案 – 2014-10-06 16:31:10

别担心。我会尽力引导你。在您想要接受的答案的投票箭头下面应该有一个勾号（复选标记）。当你点击它时，它会变成绿色，将该答案标记为已接受的答案。 – dreyescat 2014-10-06 16:45:23

我觉得你的问题不是你的第一个和最后一个栏是rowspan="2"。 rowspan属性影响行而不是列。会发生什么是你的第二行没有4列，但是2.你可以在第二行添加一个空的不可见的空单元格来补偿你想要显示/隐藏的两列之前的列数，非常重要的是，在相同的位置。然后你的:nth-child()选择器将选择适当的单元格。

<tr> 
    <td style="display: none"></td> 
    <td>End Date: 
    <div style="float: right;" id='jqxDateTimeInputend'> 
    </div> 
    </td> 
    <td> 
    <asp:DropDownList ID="dlFiscalYear" runat="server"> 
     <asp:ListItem>2013</asp:ListItem> 
    </asp:DropDownList> 
    <div style="float: left;" id="jqxDropDownListYear"> 
    </div> 
    </td> 
</tr>

来源

2014-10-05 15:42:43 dreyescat

根据你的建议，我作出了改变，其作品fine.Thanks ..干杯.. – 2014-10-06 15:03:04

具有行跨度的隐藏表列

回答

相关问题