Question

我有一个包含2行和4列的表。第一个和最后一个td是rowspan =＆＃34; 2＆＃34;。在第一列我有2个单选按钮。当我点击第一列时，第二列应该隐藏，第三列应该可见，反之亦然。因为它有rowspan td：nth-child（2）＆＃39;）。show（）无法正常工作请帮忙

＆＃13;

 $(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');
     }

   });
 });

＆＃13;

<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>

＆＃13;

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>

隐藏具有行跨度的表列

1 个答案: