hide table columns which have row span - html

Question

i have a table with 2 rows and 4 columns.first and last td is rowspan="2".
in first column i have 2 radio buttons. when i click the first one 2nd column should hide and 3rd one should be visible and vice versa.
since it has rowspan td:nth-child(2)').show() not working properly
please help
$(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

I think your problem is not that your first and last column are rowspan="2". The rowspan attribute affects rows not columns. What happens is that your second row doesn't have 4 columns but 2. You can just add an empty invisible empty cell in the second row to compensate the number of columns before the two you want to show/hide, and, very important, in the same position. Then your :nth-child() selector will select the proper cells.
<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>