CODEWITHSUNDEEP
javascriptcolorshtml-table
Manish
Manish

Reputation: 3521

How to highlight/color multiple rows on selection?

This refers to my previous question.

How to change row color on selecting rows?

This time I have one table where first column (value) in each row is numeric as follows

<table border=1>
   <tr id="id1">
      <td>3</td>
      <td>row12</td>
      <td>row13</td>
  </tr>
  <tr id="id2">
      <td>12</td>
      <td>row22</td>
      <td>row23</td>
  </tr>
  <tr id="id3">
      <td>15</td>
      <td>row32</td>
      <td>row33</td>
  </tr>
  <tr id="id4">
      <td>22</td>
      <td>row42</td>
      <td>row43</td>
 </tr>
 <tr id="id5">
      <td>23</td>
      <td>row52</td>
      <td>row53</td>
 </tr>
 <tr id="id6">
   <td>55</td>
   <td>row62</td>
   <td>row63</td>
 </tr>
</table>

Form for selecting start and stop values.

<form name="rcol" onsubmit="return false">
   Start value: <input type="value" name="start"><br>
   End value: <input type="value" name="stop"><br>
   <input type="submit" value="Submit">
</form>

On selecting start and stop values in the textbox, values will be passed to table and table will color only those rows whose first column/value lies in the start and stop range. How can we implement this? Please help me in this matter.

Upvotes: 0

Views: 544

Answers (1)

sinisake
sinisake

Reputation: 11318

Javascript:

function colorize() {
    start_val = parseInt(document.getElementById('start').value);
    stop_val = parseInt(document.getElementById('stop').value);


    rows = document.getElementsByTagName("tr");

    for (i = 0; i < rows.length; i++) {


        td = rows[i].getElementsByTagName("td")[0];

        values = td.innerHTML;

        if (values >= start_val && values <= stop_val) {

            td.parentNode.style.backgroundColor = 'red';

        } else {

            td.parentNode.style.backgroundColor = 'white';
        }




    }
}


document.getElementById("sub").addEventListener("click", colorize);

HTML:

<form name="rcol" onsubmit="return false">
   Start value: <input type="value" name="start" id="start"><br>
   End value: <input type="value" name="stop" id="stop"><br>
   <input type="submit" value="Submit" id="sub">
</form>

So, basically, loop through tr tags, find first child numeric value, compare it with start and stop values, and that's it. DEMO: http://jsfiddle.net/84932q9g/

Upvotes: 1

Related Questions