CODEWITHSUNDEEP
javascriptcolors
Manish
Manish

Reputation: 3521

How to change row color on selecting rows?

I am C++ programmer switching to web development. I am going through some tutorial and trying to color table rows. I found most of examples are related to column. Following is code attempted with some broken thoughts for 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 for selecting rows for 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 for coloring rows.

function toggleVis(){
    $(this).toggleClass("red-cell");
}

td.red-cell {
    background: #F00; /* Or some other color */
}

Pls help me how this can be used for coloring rows.

Regards

Upvotes: 0

Views: 61

Answers (1)

Oleksandr T.
Oleksandr T.

Reputation: 77482

If you use jQuery you don't need use inline function like onclick, better use jQuery "on" function. 

$(function () {
  $('.controls').on('click', function () {    
     // for row (tr)
     // $('#table').find('tr').eq(+$(this).val() - 1).toggleClass("red-cell");

     // for 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/

Upvotes: 2

Related Questions