具有行跨度的隱藏表列

Question

我有一個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>

Answer 1

我覺得你的問題不是你的第一個和最後一個欄是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>