javascript - 如何基于数据属性识别表上的重复项

我正在尝试对来自数据库的表的项目进行分组，该数据库由各种来源填充，其中之一是自动警报/警报系统。

该表如下所示：

	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>