javascript - How to change row color on selecting rows? -

javascript - How to change row color on selecting rows? -

i c++ programmer switching web development. going through tutorial , trying color table rows. found of examples related column. next code attempted broken thoughts coloring rows on selecting check box.

<table border=1> <tr id="id1"> <td>row11</td> <td>row12</td> <td>row13</td> <td>row14</td> </tr> <tr id="id2"> <td>row21</td> <td>row22</td> <td>row23</td> <td>row24</td> </tr> <tr id="id3"> <td>row31</td> <td>row32</td> <td>row33</td> <td>row34</td> </tr> </table>

code selecting rows coloring.

<form name="rcol" onsubmit="return false"> color columns <input type=checkbox name="row1" onclick="togglevis(this.name)" checked> 1 <input type=checkbox name="row2" onclick="togglevis(this.name)" checked> 2 <input type=checkbox name="row3" onclick="togglevis(this.name)" checked> 3 </form>

javascript/jquery fuction coloring rows.

function togglevis(){ $(this).toggleclass("red-cell"); } td.red-cell { background: #f00; /* or other color */ }

pls help me how can used coloring rows.

regards

if utilize jquery don't need utilize inline function onclick, improve utilize jquery "on" function.

$(function () { $('.controls').on('click', function () { // row (tr) // $('#table').find('tr').eq(+$(this).val() - 1).toggleclass("red-cell"); // cell (td) // $('#table').find('tr td').eq(+$(this).val() - 1).toggleclass("red-cell"); }); }); <table border=1 id="table"> <tr> <td>row11</td> <td>row12</td> <td>row13</td> <td>row14</td> </tr> <tr> <td>row21</td> <td>row22</td> <td>row23</td> <td>row24</td> </tr> <tr> <td>row31</td> <td>row32</td> <td>row33</td> <td>row34</td> </tr> </table> <form name="rcol" onsubmit="return false"> <p>columns</p> <input type=checkbox name="row" value="1" class='controls'> 1 <input type=checkbox name="row" value="2" class='controls'> 2 <input type=checkbox name="row" value="3" class='controls'> 3 </form>

http://jsbin.com/mowoz/1/

http://jsbin.com/mowoz/2/

javascript colors