Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  table { padding: 0; border-collapse: collapse; }
  table th { background-color: #eee; }
  table td, th { border: 1px solid #d7d7d7; padding: 7px; }
</style>
</head>
<body>
​
  
<select id="myOptions">
  <option value="1">hide col 1</option>
  <option value="2">hide col 2</option>
  <option value="3">hide col 3</option>
  <option value="4">hide col 4</option>
</select>  
  
  <p>&nbsp;</p>
  
<table id="myTable" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th>col 1</th>
      <th>col 2</th>
      <th>col 3</th>
      <th>col 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1abcdefg</td>
      <td>2abcdefg</td>
      <td>3abcdefg</td>
      <td>4abcdefg</td>
    </tr>
    <tr>
      <td>1abcdefg</td>
      <td>2abcdefg</td>
      <td>3abcdefg</td>
      <td>4abcdefg</td>
    </tr>
    <tr>
      <td>1abcdefg</td>
      <td>2abcdefg</td>
      <td>3abcdefg</td>
      <td>4abcdefg</td>
    </tr>
    <tr>
      <td>1abcdefg</td>
      <td>2abcdefg</td>
      <td>3abcdefg</td>
      <td>4abcdefg</td>
    </tr>
  </tbody>
  </table>  
​
  <script type="text/javascript">
function hideColumn(columnIndex) {
   $('#myTable thead th, #mytable tbody td').show();
   $('#mytable thead th:nth-child('+(columnIndex)+'), #mytable tbody td:nth-child('+(columnIndex)+')').hide();
​
}
​
    $("#myOptions").change(function() {
      selectedVal = $(this).val();
      console.log(selectedVal);
      hideColumn( selectedVal );
    });
    
  </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers