Sum the red row of the table in javascript and then modify the table

Question

My web application collects data using:

• id (key value)

• Time stamp

• value

He then creates the HTML table as follows:

<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 a time stamp for ID1, and "t2" is a time stamp for ID2 and ...

t1 + 2 seconds >= t2

line ID2 turns red.

In my example:

• ID1 red (# FFA9A9) reason ID2 (same value and time stamp within 2 seconds)

• ID3 is the red cause of ID5, which is the red cause of ID6.

• ID8 is the red reason for ID9

in this case, ID1 is a copy, and ID2 is the original; ID3 and ID5 are copies, and ID6 is the original; ID8 is a copy, and ID9 is the original.

I need to count the red copy and put the counter in another cell of the row, which 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 this because I have 3 data collectors and I need to understand which event is repeating ... If the value is the same and the timestamp is between 2 seconds, this is the same event and I need to take only the old one in table, but I need to also show that there is another captured copy ...

Any help? I can change the class, name, or something else, but I need to do this when the html page is loaded and on the client side (therefore javascript or jQuery) ...

I need:

1) scan the table in rows from the first to the last

2) understand if this is a red line

3) if it is a red line, I need to start counting red lines with the same value before the line is not red with the same value. then I put the counter in a new cell of the same non-red line ...

Many thanks!!! (and sorry for my bad english!)

Answer 1

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

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

api.jquery.com/attribute-equals-selector

Hope this is helpful.

Edit: with red lines highlighted, you can also run .each() on selected elements and .children() them .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 that are not red, and all trs that are red. Then iterate over non-red trs children and check their children against red trs children tds (provided that the order of tds is always the same). tds.eq (0) is the identifier, tds.eq (1) is the timestamp of tds.eq (2) Value. So you can compare tds.eq (2) == redtds.eq (2) so that they match the values. When you have a find, you can come across a counter and add a fourth td with a counter value. Try reading in jQuery and Javascript for in selectors (or jQuery.each, which may be a little more confusing for beginners).