具有行跨度的隱藏表列

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

具有行跨度的隱藏表列

回答

相關問題