如何根據數據屬性來識別表格上的重複項目

我試圖將來自數據庫的表格項目從各種來源（其中一個來自自動警報/警報系統）填充。如何根據數據屬性來識別表格上的重複項目

表看起來是這樣的：

\t var rows = []; 
 
\t var tableRows = $("#tabla1 > tbody > tr > td:nth-child(3)"); 
 
\t tableRows.each(function(n){ 
 
\t \t var row = {}; 
 
\t \t var timecode = this.dataset.timecode; 
 
\t \t var service = this.dataset.service; 
 
\t \t row.timecode = timecode; 
 
\t \t row.service = service; 
 
\t \t rows.push(row) 
 
\t }); 
 
\t console.log(rows);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="tabla1"> 
 
\t <tbody class="table-hover"> 
 
\t \t <tr class="even"> 
 
\t \t \t <td align="center"> 
 
\t \t \t \t <img src=""> 
 
\t \t \t </td> 
 
\t \t \t <td><span>ALARM</span> 
 
\t \t \t </td> 
 
\t \t \t <td data-timecode="06Oct 18:25 URB07A" data-service="C"></td> 
 
\t \t </tr> 
 
\t \t <tr class="odd"> 
 
\t \t \t <td align="center"> 
 
\t \t \t \t <img src=""> 
 
\t \t \t </td> 
 
\t \t \t <td><span>ALARM</span> 
 
\t \t \t </td> 
 
\t \t \t <td data-timecode="06Oct 18:27 URB07B" data-service="C"></td> 
 
\t \t </tr> 
 
\t \t <tr class="even"> 
 
\t \t \t <td align="center"> 
 
\t \t \t \t <img src=""> 
 
\t \t \t </td> 
 
\t \t \t <td><span>ALARM</span> 
 
\t \t \t </td> 
 
\t \t \t <td data-timecode="06Oct 18:27 URB07B" data-service="T"></td> 
 
\t \t </tr> 
 
\t \t <tr class="odd"> 
 
\t \t \t <td align="center"> 
 
\t \t \t \t <img src=""> 
 
\t \t \t </td> 
 
\t \t \t <td><span>ALARM</span> 
 
\t \t \t </td> 
 
\t \t \t <td data-timecode="06Oct 18:35 CAD51B" data-service="C"></td> 
 
\t \t </tr> 
 
\t \t <tr class="even"> 
 
\t \t \t <td align="center"> 
 
\t \t \t \t <img src=""> 
 
\t \t \t </td> 
 
\t \t \t <td><span>ALARM</span> 
 
\t \t \t </td> 
 
\t \t \t <td data-timecode="06Oct 18:35 CAD51B" data-service="I"></td> 
 
\t \t </tr> 
 
\t \t <tr class="odd"> 
 
\t \t \t <td align="center"> 
 
\t \t \t \t <img src=""> 
 
\t \t \t </td> 
 
\t \t \t <td><span>ALARM</span> 
 
\t \t \t </td> 
 
\t \t \t <td data-timecode="06Oct 18:35 CAD51B" data-service="T"></td> 
 
\t \t </tr> 
 
\t </tbody> 
 
</table>

給你更多的背景下，該表的每一行都是一個警報/提醒自動或手動生成。警報類型在「數據服務」屬性上指示，時間戳和區域代碼在另一個屬性「時間碼」上指示。

這只是一個例子，表中還有其他的列對於這個例子來說是不必要的。

我需要做的只是分組，或者至少突出顯示'時間碼'相同的所有行。雖然理想的情況是擦除相似的物品，只留下一個突出的物品，這意味着它是各種類型的相同警報。

我已經成功地組織了每個行'時間碼'和'服務'的對象中的項目。所有這些對象都在一個數組中。

現在，我不知道如何比較每個對象與其他對象，看看是否有類似的'時間碼'。

最後一件事：有時表格最多可以有1000行，但通常有150-250個警報。所以，做任何例行公事都需要考慮的時間。

來源

2016-10-07 Andres Garcia

注意，[這個問題是非常相似（http://stackoverflow.com/questions/26824625/group-list-items-into-sub-lists-based-on- a-data-attribute？rq = 1），但不同:)。 –

我甚至不會與物體或其他任何打擾。你說要刪除類似的項目，並突出其中之一。你所需要做的就是找到當前行的時間碼。如果有其他行具有相同的時間碼，請刪除它們並突出顯示當前行。

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

來源

2016-10-07 21:49:38

非常感謝。你指出我正確的方向。 –

您可以使用時間碼指數：

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[timecode] = rows[timecode] || [] 
    rows[timecode].push(row) 
}); 
console.log(rows);

來源

2016-10-07 21:02:00

如何根據數據屬性來識別表格上的重複項目

回答

相關問題