Question

我想显示一个表，但只根据选择元素中的选择显示特定的列。

<table>
<thead>
<td colspan="5">
<SELECT name="menu">
        <option value="eur">EUR</option>
        <option value="thb">THB</option>
        <option value="btc">BTC</option>
        <option value="eth">ETH</option>
        <option value="xmr">XMR</option>
        </SELECT>
</td> 
</thead>
<tbody>
    <tr>
       <td>column 1</td>
       <td>column 2</td>
       <td>column 3</td>
       <td>column 4</td>
       <td>column 5</td>
    </tr>
    <tr>
       <td>column 1</td>
       <td>column 2</td>
       <td>column 3</td>
       <td>column 4</td>
       <td>column 5</td>
    </tr>
    </tbody>
</table>

使用Javascript：

$(document).on('change', 'table thead select', function() {
    var selected = $(this).is(":selected");

    var index = $(this).parent().index();
        $('table tbody tr').each(function() {
            if(selected) {
                $(this).find("td").eq(index).show();   
            } else {
                $(this).find("td").eq(index).hide();   
            }
        });
});

代码有效一次。但是，在第一次更改选择后，表格列不再更新... 这是上面代码的小提琴：https://jsfiddle.net/jsrookey/z8pj7dns/

Answer 1

不选择
获取所选选项的索引
在选择中显示所有td，然后隐藏所选选项的索引

$(document).on('change', 'table thead select', function() {

  var index = $('option:selected',this).index();
  
  console.log(index)
  $('table tbody tr').each(function() {
      $(this).find("td").show();
       $(this).find("td:nth-child("+index+")").hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <td colspan="5">
      <SELECT name="menu">
        <option value="eur">EUR</option>
        <option value="thb">THB</option>
        <option value="btc">BTC</option>
        <option value="eth">ETH</option>
        <option value="xmr">XMR</option>
        </SELECT>
    </td>
  </thead>
  <tbody>
    <tr>
      <td>column 1</td>
      <td>column 2</td>
      <td>column 3</td>
      <td>column 4</td>
      <td>column 5</td>
    </tr>
    <tr>
      <td>column 1</td>
      <td>column 2</td>
      <td>column 3</td>
      <td>column 4</td>
      <td>column 5</td>
    </tr>
  </tbody>
</table>

Answer 2

您不需要两个变量，一个索引就足够了。

$(document).on('change', 'table thead select', function() {
  var index = $(this).find("option:selected").index();
  $('table tbody td').show();
  $('table tbody tr').each(function() {
    $(this).find("td:eq(" + index + ")").hide();
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <td colspan="5">
      <SELECT name="menu">
        <option value="eur">EUR</option>
        <option value="thb">THB</option>
        <option value="btc">BTC</option>
        <option value="eth">ETH</option>
        <option value="xmr">XMR</option>
      </SELECT>
    </td>
  </thead>
  <tbody>
    <tr>
      <td>column 1</td>
      <td>column 2</td>
      <td>column 3</td>
      <td>column 4</td>
      <td>column 5</td>
    </tr>
    <tr>
      <td>column 1</td>
      <td>column 2</td>
      <td>column 3</td>
      <td>column 4</td>
      <td>column 5</td>
    </tr>
  </tbody>
</table>

Answer 3

您需要更改以下代码行：

 var index = $(this).parent().index();

该索引目前始终为0.我认为这是第一次工作的原因是因为它只能隐藏0次。你实际上得到了选择的父母！将其更改为：

 var index = $(this).find("option:selected").index();

根据选择选项（jQuery）显示/隐藏表列

3 个答案: