データ属性に基づいてテーブル上の繰り返し項目を特定する方法

Question

さまざまなソースから取り込まれたデータベースのテーブル項目をグループ化しようとしています。そのうちの1つは、自動アラート/アラームシステムです。

表は次のようになります。あなたはより多くの背景を与えるために

\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個のアラームがあります。だから、何らかのルーチンを実行するのにかかる時間は考慮すべきものです。

Answer 1

、私もオブジェクトまたは何か他のものを気にしないでしょう。あなたは、類似のアイテムを消去し、それらの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>

Answer 2

あなたはインデックスとしてタイムコードを使用することができます。

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