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 &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: 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  });

here demo http://jsbin.com/leqinun/1/edit?html,js,output


Comments

Post a Comment

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

i'm looking dynamically populate select element names of items stored array. for reason it's not working , i'm not sure why. html: <div class="col-md-4 col-md-offset-4"> <select class="select1"> </select> , <select class="select2"> </select> </div> note i'm using bootstrap layout. here's jquery i'm using try , populate ".select1" jquery: select: function() { $.each(state.greens, function(index, value) { $(".select1").append("<option value =' " + index + " '>" + state.greens[index].name + "</option>"); }); } note function 'select' stored within object called 'display'. state.greens name of array i'm trying access. so @ end of html page call display.select(); call function. no error messages showing in console. also, saw question: appending
Read more

Android soft keyboard reverts to default keyboard on orientation change -

i'm building android soft keyboard , can't seem fix bug - have arabic , qwerty keyboard , when rotate device on qwerty keyboard (or arabic shift), it's if program has "restarted" , becomes arabic keyboard without shift. the onsaveinstancestate(bundle savedinstancestate) not work because application not extend activity inputmethodservice . i put following in android manifest android:configchanges="keyboard|keyboardhidden|orientation" android:windowsoftinputmode="stateunchanged|adjustresize"> i tried using @override public void onconfigurationchanged(configuration newconfig) { super.onconfigurationchanged(newconfig); log.i(mydebug, "config changed " + currentkeyboard.equals(qwerty)); } however, currentkeyboard.equals(qwerty)) results false , made sure true before orientation change. any appreciated. i think applications fault. if application restarting on orientation change
Read more

Rendering JButton to get the JCheckBox behavior in a JTable by using images does not update my table -

i rendering jbutton image on simulate jcheckbox behavior. why don't let jtable render jcheckbox? because need bigger checkboxes , there's no way can resize them (as far know). so, have own table cell renderer , editor. both renders jbutton , checkbox images on them. trying change image checked image unchecked image (or vice versa) , update cell value (boolean true or false). however, reason, getcelleditorvalue() not update table. so, release mouse, value goes original one. any appreciated! lot! public class tableexample extends jframe { jscrollpane pane; jpanel panel; jtable table; object[][] data; mytablemodel tm; renderer buttoncolumn; public tableexample(object[][] data) throws ioexception { string[] columns = {"column#1", "column#2", "column#3", "column#4", "column#5", "column#6"}; this.data = data; this.setpreferredsize(new dimension(700, 500));
Read more