基於選擇選項（jQuery）顯示/隱藏表列

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

1. 沒有得到選擇
2. 獲取的指標所選的選項
3. 展會上的所有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();