我正在尝试对来自数据库的表的项目进行分组,该数据库由各种来源填充,其中之一是自动警报/警报系统。
该表如下所示:
var rows = [];
var tableRows = $("#tabla1 > tbody > tr > td:nth-child(3)");
tableRows.each(function(n){
var row = {};
var timecode = this.dataset.timecode;
var service = this.dataset.service;
row.timecode = timecode;
row.service = service;
rows.push(row)
});
console.log(rows);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tabla1">
<tbody class="table-hover">
<tr class="even">
<td align="center">
<img src="">
</td>
<td><span>ALARM</span>
</td>
<td data-timecode="06Oct 18:25 URB07A" data-service="C"></td>
</tr>
<tr class="odd">
<td align="center">
<img src="">
</td>
<td><span>ALARM</span>
</td>
<td data-timecode="06Oct 18:27 URB07B" data-service="C"></td>
</tr>
<tr class="even">
<td align="center">
<img src="">
</td>
<td><span>ALARM</span>
</td>
<td data-timecode="06Oct 18:27 URB07B" data-service="T"></td>
</tr>
<tr class="odd">
<td align="center">
<img src="">
</td>
<td><span>ALARM</span>
</td>
<td data-timecode="06Oct 18:35 CAD51B" data-service="C"></td>
</tr>
<tr class="even">
<td align="center">
<img src="">
</td>
<td><span>ALARM</span>
</td>
<td data-timecode="06Oct 18:35 CAD51B" data-service="I"></td>
</tr>
<tr class="odd">
<td align="center">
<img src="">
</td>
<td><span>ALARM</span>
</td>
<td data-timecode="06Oct 18:35 CAD51B" data-service="T"></td>
</tr>
</tbody>
</table>
为了给您提供更多背景信息,表的每一行都是自动或手动生成的警报/警报。警报的类型在“数据服务”属性上指示,时间戳和区域代码在另一个称为“时间代码”的属性上指示。
这仅是示例,表上还有其他列对于该示例而言是不必要的。
我需要做的只是分组或至少突出显示“时间码”相同的所有行。尽管理想的情况是删除相似的项目并仅保留一个突出显示的内容,这意味着不同类型的警报是相同的。
我已经设法将对象组织成具有“时间码”和“服务”每一行的对象。所有这些对象都在一个数组中。
现在,我不知道如何将每个对象与其他对象进行比较,以查看是否存在类似的“时间码”。
最后一件事:有时表最多可以有1000行,但是通常它有150-250个警报。因此,要考虑执行任何例行程序所花费的时间。
最佳答案
我什至不理会物体或其他任何东西。您说要删除类似的项目并突出显示其中之一。您需要做的就是找到当前行的时间码。如果还有其他行具有相同的时间码,请将其删除并突出显示当前行。
$(function() {
// Note that this is now a list of actual rows, rather than the `td`.
var tableRows = $("#tabla1 > tbody > tr");
// Keep track of which timecodes we've removed
var dupeTimecodes = [];
tableRows.each(function(n) {
var row = $(this);
var timecodeCell = row.find('td').eq(2);
var timecode = timecodeCell.data('timecode');
// dupes are cells with the same timecode, that's not this one
var dupes = tableRows.find('td[data-timecode="' + timecode + '"]').not(timecodeCell);
// tableRows.each is going to iterate over a cached copy of the DOM, so we need to check if we've already removed it
if (dupes.length > 0 && dupeTimecodes.indexOf(timecode) === -1) {
dupeTimecodes.push(timecode);
// Add a class to the current row
row.addClass('marked');
// remove the duplicates
dupes.each(function() {
$(this).closest('tr').remove();
});
}
});
});
.marked { background-color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tabla1">
<tbody class="table-hover">
<tr class="even">
<td align="center">
<img src="">
</td>
<td><span>ALARM</span>
</td>
<td data-timecode="06Oct 18:25 URB07A" data-service="C"></td>
</tr>
<tr class="odd">
<td align="center">
<img src="">
</td>
<td><span>ALARM</span>
</td>
<td data-timecode="06Oct 18:27 URB07B" data-service="C"></td>
</tr>
<tr class="even">
<td align="center">
<img src="">
</td>
<td><span>ALARM</span>
</td>
<td data-timecode="06Oct 18:27 URB07B" data-service="T"></td>
</tr>
<tr class="odd">
<td align="center">
<img src="">
</td>
<td><span>ALARM</span>
</td>
<td data-timecode="06Oct 18:35 CAD51B" data-service="C"></td>
</tr>
<tr class="even">
<td align="center">
<img src="">
</td>
<td><span>ALARM</span>
</td>
<td data-timecode="06Oct 18:35 CAD51B" data-service="I"></td>
</tr>
<tr class="odd">
<td align="center">
<img src="">
</td>
<td><span>ALARM</span>
</td>
<td data-timecode="06Oct 18:35 CAD51B" data-service="T"></td>
</tr>
</tbody>
</table>