javascript - Change table's column color through depending on select -
i have table 3 columns , want change it's color green depending on select on checklist (form).
i want change in green column depending on city choose. example if choose new york, column new york become green. ideas?
html - table:
<table id="mytable"> <tr class="head"> <th></th> <th>new york</th> <th>chicago</th> <th>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 @ 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 & 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: 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> html - form :
<form name="myform" method="post"> <fieldset> <legend>register interest</legend> <p><label class="title" for="name">your name:</label> <input type="text" name="name" id="name"><br /> <label class="title" for="email">your email:</label> <input type="text" name="email" id="email"></p> <label class="title" for="persons">persons:</label> <input id="personsid" type="text" name="persons" id="persons"></p> <p><label for="location" class="title">your closest center:</label> <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></p> <span class="title">are member?</span> <label><input type="radio" name="member" value="yes" /> yes</label> <label><input type="radio" name="member" value="no" /> no</label></p> </fieldset> <div class="submit" id="mybutton"><input type="button" value="register" /></div> </form> script :
<script type="text/javascript"> $(document).ready(function(){ $( ".target" ).change(function() { $("tr:even").css("background-color", "green"); }); }); </script>
instead of using if else add data-city attribute map value of dropdown corresponds column of table. add data-city th this
<th data-city="ny">new york</th> <th data-city="il">chicago</th> <th data-city="ca">san francisco</th> based on dropdown value select th , index. entire column (tds) based on index , change css.
$(document).ready(function(){ $( ".target" ).change(function() { var city = $(this).val(); // <--- value drop down var index = $('#mytable th[data-city="'+city+'"]').index()+1; $("td").css("background-color", "transparent"); // <--- reset color columns $("td:nth-child("+index+")").css("background-color", "green"); }).change(); // <-- color column on load });
Comments
Post a Comment