javascript - 在 javascript 中对表格的红色行求和，然后更改表格

Question

我的网络应用程序通过以下方式收集数据:

• id(键值)

• 时间戳

• 值(value)

然后，它会创建一个 HTML 表格，如下所示:

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

解释: 它按 DESC 顺序对时间戳值进行排序。

例如，如果 t1 是 ID1 的时间戳，'t2' 是 ID2 的时间戳，并且...

t1 + 2 秒 >= t2

ID2 行变为红色。

在我的例子中:

• ID1 为红色 (#FFA9A9) 是 ID2 的原因(2 秒之间的值和时间戳相同)

• ID3 是 ID5 的红色原因，是 ID6 的红色原因。

• ID8 是红色的原因是 ID9

在这种情况下，ID1 是副本，ID2 是原件； ID3、ID5为复印件，ID6为原件； ID8 是副本，ID9 是原件。

我必须计算红色副本并将计数器放在原始行的另一个单元格中。

我的例子的结果应该是:

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

我需要它，因为我有 3 个数据收集器，我需要了解哪个事件重复了同一事件...如果值相同且时间戳在 2 秒之间，则它是同一事件，我需要只取表中较旧的一个，但我还需要证明存在其他捕获的副本...

有什么帮助吗？ 我可以更改类、名称或其他任何内容，但我需要在加载 html 页面和客户端(因此 javascript 或 jQuery)时执行此操作...

我需要:

1. 从头到尾逐行扫描表格

2. 看懂是不是红线

3. 如果它是红色行，我需要在具有相同值的非红色行之前开始计算具有相同值的红色行。然后我把计数器放在同一个非红色行的新单元格中......

非常感谢!!! (抱歉我的英语不好!)

Answer 1

使用 jQuery，您可以选择所有具有属性 bgcolor="#FFA9A9"的 tr 元素，然后使用 .size() 或 .length 来获取计数。

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

api.jquery.com/attribute-equals-selector

希望有用。

编辑:通过像上面那样选择红线，您还可以在所选元素上运行 .each() 并分析它们的 .children()

编辑 2:也许这是一种有用的方法？

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
    }
}

想法是选择所有非红色的 trs 和所有红色的 trs。 然后遍历非红色 trs 并根据红色 trs 子 tds 检查它们的子 tds(假设 tds 的顺序始终相同)。 tds.eq(0)是ID，tds.eq(1)是时间戳，tds.eq(2)是Value。所以你可以比较 tds.eq(2) == redtds.eq(2) 来匹配这些值。 当你有一个 find 时，你可以建立一个计数器并最终添加带有计数器值的第四个 td 。 尝试阅读 jQuery 选择器和 Javascript for in 循环(或者 jQuery.each，这对初学者来说可能有点困惑)。