Bootstrap3のドロップダウン的なやつ

http://b.hatena.ne.jp/entry/moneyreport.hatenablog.com/entry/website_bootstrap03

by psne

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    SIMの種類
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#" data-select="data">データ専用SIM</a></li>
    <li><a href="#" data-select="sms">SMS付SIM</a></li>
    <li><a href="#" data-select="talk">音声通話SIM</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">リセット</a></li>
  </ul>
</div>

<table class="table table-condensed">
  <thead>
  <tr> 
   <th>データ容量</th>
     <th>A社</th> <th>B社</th> <th>C社</th>
  </tr> 
  </thead> 
  <tbody id="target-table"> 
    <tr> 
      <th scope="row">500GB</th>
      <td class="saiyasu-data">1000</td> <td>1280</td> <td>1500</td> 

</tr>
        <tr> 
      <th scope="row">1GB</th>
      <td>2280</td> <td class="saiyasu-data saiyasu-sms">2200</td> <td>2800</td> 
    </tr>

    <tr> 
      <th scope="row">2GB</th>
      <td class="saiyasu-data">2800</td> <td class="saiyasu-sms">3200</td> <td class="saiyasu-talk">3600</td> 
    </tr>

  </tbody> 
</table>

CSS

body {
    margin: 10px;
}
.saiyasu-color-data .saiyasu-data{
  background-color:#5bc0de;
}
.saiyasu-color-sms .saiyasu-sms{
  background-color:#5bc0de;
}
.saiyasu-color-talk .saiyasu-talk{
  background-color:#5bc0de;
}

JavaScript

var list = document.querySelectorAll('li a');
for(var i=0 ;i<list.length;i++){
 	list[i].addEventListener('click', function () {
  if(this.dataset.select === undefined) {
  	document.getElementById('target-table').className='';
  	return;
  }
    document.getElementById('target-table').className='saiyasu-color-' +this.dataset.select;
 	});
}