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 src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body>
    <select class="target" name="location" id="location">
      <option id="1" value="ny">New York</option>
      <option id="2" value="il">Chicago</option>
      <option id="3" value="ca">San Francisco</option>
    </select>
    <table id="myTable">
      <tr class="head">
        <th></th>
        <th data-city="ny">New York</th>
        <th data-city="il">Chicago</th>
        <th data-city="ca">San Francisco</th>
      </tr>
      <tr>
        <th>A Poetic Perspective</th>
        <td>Sat, 4 Feb 2012<br />11am - 2pm</td>
        <td>Sat, 3 Mar 2012<br />11am - 2pm</td>
        <td>Sat, 17 Mar 2012<br />11am - 2pm</td>
      </tr>
      <tr class="even">
        <th>Walt Whitman at War</th>
        <td>Sat, 7 Apr 2012<br />11am - 1pm</td>
        <td>Sat, 5 May 2012<br />11am - 1pm</td>
        <td>Sat, 19 May 2012<br />11am - 1pm</td>
      </tr>
      <tr>
        <th>Found Poems &amp; Outsider Poetry</th>
        <td>Sat, 9 Jun 2012<br />11am - 2pm</td>
        <td>Sat, 7 Jul 2012<br />11am - 2pm</td>
        <td>Sat, 21 Jul 2012<br />11am - 2pm</td>
      </tr>
      <tr class="even">
        <th>Natural Death: An Exploration</th>
        <td>Sat, 4 Aug 2012<br />11am - 4pm</td>
        <td>Sat, 8 Sep 2012<br />11am - 4pm</td>
        <td>Sat, 15 Sep 2012<br />11am - 4pm</td>
      </tr>
    </table>
  </body>
</html>
 
$(document).ready(function(){
  $( ".target" ).change(function() {
    var city = $(this).val();
    var index = $('#myTable th[data-city="'+city+'"]').index()+1;
    console.log(city, index);
    $("td").css("background-color", "transparent");
    $("td:nth-child("+index+")").css("background-color", "green");
  }).change();
});
Output

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

Dismiss x
public
Bin info
dhirajbodicherlapro
0viewers