Sum red row of a table in javascript and then alter the table

Question

My web application collects data with:

• id (key value)

• timestamp

• value

Then, it creates an HTML table like this:

    <table>
      <tr bgcolor="#FFA9A9">
        <td> ID1 </td>  
        <td> 20150619T09.43.03</td> 
        <td>VALUE1</td> 
      </tr>
      <tr>  
        <td> ID2 </td>
        <td> 20150619T09.43.02</td> 
        <td>VALUE1</td> 
      </tr>
      <tr bgcolor="#FFA9A9">  
        <td> ID3 </td>
        <td> 20150619T09.43.00</td> 
        <td>VALUE2</td> 
      </tr>
      <tr>  
        <td> ID4 </td>
        <td> 20150619T09.42.59 </td> 
        <td> VALUE1</td> 
      </tr>
      <tr bgcolor="#FFA9A9">  
        <td> ID5 </td>
        <td> 20150619T09.42.59 </td> 
        <td> VALUE2</td> 
      </tr>
      <tr>  
        <td> ID6 </td>
        <td> 20150619T09.42.58</td> 
        <td>VALUE2</td> 
      </tr>
      <tr>  
        <td> ID7 </td>
        <td> 20150619T09.42.55 </td> 
        <td> VALUE2 </td> 
      </tr>
      <tr bgcolor="#FFA9A9">  
        <td> ID8 </td>
        <td> 20150619T09.42.40 </td> 
        <td> VALUE2 </td> 
      </tr>
      <tr>  
        <td> ID9 </td>
        <td> 20150619T09.42.39 </td> 
        <td> VALUE2 </td> 
      </tr>
    </table>

Explanation: It sorts the timestamp value in DESC order.

If, for example, t1 is the timestamp for ID1 and 't2' is the timestamp for ID2, and...

t1 + 2 seconds >= t2

the ID2 row becomes red.

In my example:

• ID1 is red (#FFA9A9) cause of ID2 (same value and timestamp between 2 sec)

• ID3 is red cause of ID5 that is red cause of ID6.

• ID8 is red cause of ID9

in that case ID1 is a copy and ID2 is original; ID3 and ID5 are a copy and ID6 is the original; ID8 is a copy and ID9 is it's original.

I've got to count the red copy and put the counter in another cell of the row that is the original.

The result of my example should be:

    <table>
      <tr>  
        <td> ID2 </td>
        <td> 20150619T09.43.02</td> 
        <td>VALUE1</td> 
        <td>1</td>    --> one record not shown (ID1)
      </tr>
      
      <tr>  
        <td> ID4 </td>
        <td> 20150619T09.42.59 </td> 
        <td> VALUE1</td> 
        <td> 0 </td>
      </tr>
      
      <tr>  
        <td> ID6 </td>
        <td> 20150619T09.42.58</td> 
        <td>VALUE2</td> 
        <td>2</td>    --> two records not shown (ID3 and ID5)
      </tr>
      <tr>  
        <td> ID7 </td>
        <td> 20150619T09.42.55 </td> 
        <td> VALUE2 </td> 
        <td> 0 </td>
      </tr>
      <tr>  
        <td> ID9 </td>
        <td> 20150619T09.42.55 </td> 
        <td> VALUE2 </td> 
        <td> 1 </td>    --> one record not shown (ID8)
      </tr>
    </table>

I need it because i've got 3 data collector and i need to understand which event is the same one repeated... If the value is the same and the timestamp are between 2 sec it is the same event and i need to take only the older one in table but i need also show that exists other captured copy of it...

Any help? I can change class, name or anything else, but i need to do it when the html page is loaded and client side (so javascript or jQuery)...

I need to:

1. scan table row by row from first to last

2. understand if it is a red row

3. if it is a red row I need to start a count of red rows with same value before a row not red with the same value. then i put the counter in a new cell of the same not red row...

Thank you very much!!! (and sorry for my bad english!)

Answer 1

With jQuery you can select all tr elements with the attribute bgcolor="#FFA9A9" then use .size() or .length to get the count.

jQuery('tr[bgcolor="#FFA9A9"]').size();

api.jquery.com/attribute-equals-selector

Hope that is useful.

Edit: With the red lines selected like above you can also run an .each() over the selected elements and analyse their .children()

Edit 2: Maybe this is a useful approach?

trs = jQuery('tr:not[bgcolor="#FFA9A9"]');
redtrs = jQuery('tr[bgcolor="#FFA9A9"]');

for (i in trs)
{
    tds = trs.eq(i).children('td');
    for (j in redtrs)
    {
        redtds = redtrs.eq(j).children('td');
        //do your checking here
    }
}

the idea is to select all trs which are not red and all trs which are red. Then iterate over the non-red trs and check their children tds against the red trs children tds (assuming the order of the tds is always the same). tds.eq(0) is the ID, tds.eq(1) is the time stamp tds.eq(2) the Value. So you can compare tds.eq(2) == redtds.eq(2) to match the values. When you have a find you could up a counter and end up adding a fourth td with the counter value. Try reading in on the jQuery selectors and the Javascript for in loop (or the jQuery.each which can be a bit more confusing for beginners though).