Question

我有一个6列的表。它有一个下拉菜单，以便观众可以选择四个最右列中的一个（这四个列的“th”是choiceA，choiceB，choiceC，choiceD）。我只希望显示所选列;其他三个未选择的列将被隐藏。最左边的两列始终可见。

即，观众总共只能看到三列（当然还有下拉列表）。如果她从下拉菜单中选择，例如“选择A，lbs”，则想法是显示整个选项A列并隐藏所有其他列。

我认为这将是一个简单的父/子问题，但事实证明这一点很简单。我试图将下拉选项映射到选项的列头

这是我的jquery代码（请记住，我是初学者）：

 $(document).ready(function () {
    $('#ddselect').change(function () {
       var id = $(this).children(':selected').attr('id');
       $('#' + id + '-sel').show().siblings('th.substance').hide();
       $('.' + id + '-substance').show().not($('.' + id + '-substance')).hide();
    });
 });

这是HTML：

<table>
<tr>
    <th scope="col" align="left"></th>
    <th scope="col"></th>
    <th colspan="4" scope="col">
        <select id='ddselect'>
            <option class='ddselect' id="ChoiceA">ChoiceA, lbs</option>
            <option class='ddselect' id="ChoiceB">ChoiceB, oz</option>
            <option class='ddselect' id="ChoiceC">ChoiceC, oz</option>
            <option class='ddselect' id="ChoiceD">ChoiceD, oz</option>
        </select>
</tr>
<tr>
    <th scope="col" align="left">Module</th>
    <th scope="col" align="left">Units</th>
    <th class='substance' id='ChoiceA-sel' scope="col">ChoiceA</th>
    <th class='substance' id='ChoiceB-sel' scope="col">ChoiceB</th>
    <th class='substance' id='ChoiceC-sel' scope="col">ChoiceC</th>
    <th class='substance' id='ChoiceD-sel' scope="col">ChoiceD</th>
</tr>
<tr>
    <td>type1</th>
        <td>5,000</td>
        <td class='ChoiceA-substance'>0</td>
        <td class='ChoiceB-substance'>0</td>
        <td class='ChoiceC-substance'>0</td>
        <td class='ChoiceD-substance'>0</td>
</tr>
<tr>
    <td>type2</th>
        <td>545</td>
        <td class='ChoiceA-substance'>288</td>
        <td class='ChoiceB-substance'>8</td>
        <td class='ChoiceC-substance'>9</td>
        <td class='ChoiceD-substance'>0.2</td>
</tr>
<tr>
    <td>type3</th>
        <td>29</td>
        <td class='ChoiceA-substance'>15</td>
        <td class='ChoiceB-substance'>89</td>
        <td class='ChoiceC-substance'>43</td>
        <td class='ChoiceD-substance'>9.9</td>
</tr>
</tr>

我可以使用下拉列表显示正确的列标题并隐藏其他列，但不能隐藏与隐藏的头相对应的“td”。（我会发布一个堆栈片段，但该按钮没有出现在我的编辑器中。）

有什么想法吗？

Answer 1

根据您在加载页面时的代码，我们可以看到列名称“ Choice One”和“ Choice Two”。因此，最好在页面加载时隐藏列名。

$('#sel').on('change', function() {
  var val = $(this).val(),
    target = '.' + val;
  $('.choice').hide();
  $(target).show();
});

/*Add below code for showing column name accordingly to select box change 
 */

$('.choice').hide();
if ($('#sel').val() == 'one') {
  $('.one').show()
} else {
  $('.two').show()
}

Answer 2

Let's break this down into a small sized example. It's better not to over complicate your code when you're working with concepts you don't fully grasp yet.

A good way to achieve what you want is to use common classes, and cross classes to pick and choose the right columns.

The code becomes much cleaner this way:

http://jsbin.com/megicegupa/1/edit?html,js,output

$('#sel').on('change', function () {
  var val = $(this).val(),
      target = '.' + val;
  
  $('.choice').hide();
  $(target).show();
});

  <select id="sel">
    <option value="one">1</option>
    <option value="two">2</option>
  </select>
  
  <table>
    <tr>
      <th>Module</th>
      <th>Units</th>
      <th class="choice one">Choice One</th>
      <th class="choice two">Choice Two</th>
    </tr>
    
    <tr>
      <td>type1</td>
      <td>5000</td>
      <td class="choice one">100</td>
      <td class="choice two">200</td>
    </tr>
    
    <tr>
      <td>type2</td>
      <td>350</td>
      <td class="choice one">40</td>
      <td class="choice two">90</td>
    </tr>
  </table>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Side note: You have some <td> tags that are followed by </th> tags. Make sure to validate your HTML for errors.

jquery根据下拉选择隐藏表中的列

2 个答案: