使用jQuery更新TR的數據屬性

Question

我已經閱讀了很多答案，但我仍然不確定如何更新TR的屬性。我的代碼的想法是在更新第一行的data-auditidentity屬性時將相似的行合併爲一個。

什麼在藍色火焰我缺少？最終結果應該是過程的一個錶行，data-auditidentity屬性應該有全部四個逗號分隔的鍵。嘗試使用attr更新以使所有四個值逗號分隔失敗。

var uniqueKeys = []; 
 
var resultsTable = $('#results'); 
 
$(resultsTable).find('tbody > tr').each(function() { 
 

 
    var tableName = $(this).find('td:eq(0)').text(); 
 
    var tableAction = $(this).find('td:eq(1)').text(); 
 
    var uniqueKey = tableName + '#' + tableAction; 
 

 
    if (uniqueKeys.indexOf(uniqueKey) < 0) { 
 
    uniqueKeys.push(uniqueKey); 
 
    } else { 
 

 
    var initValue = '', 
 
     newCombinedValues = '', 
 
     auditidentity = ''; 
 
    initValue = $(resultsTable).find(" tr td:first-child:contains(" + tableName + ")").parent().attr('data-auditidentity'); 
 

 
    var activityLogId = $(this).data('activitylogid'); 
 
    auditidentity = $(this).data('auditidentity'); 
 

 
    newCombinedValues = initValue + "," + auditidentity; 
 

 
    $(resultsTable).find("tbody tr td:first:contains(" + tableName + ")").parent().attr('data-auditidentity', newCombinedValues); 
 

 
    // After we have what we need, remove the combined row as we are combining the keys into one row 
 
    //$(this).remove(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="results"> 
 
<tbody role="alert" aria-live="polite" aria-relevant="all" data-auditidentity="18487179,18487183"> 
 
    <tr class="subRow odd" data-activitylogid="6459056" data-auditidentity="18487186" data-auditid="f831583e-d1a9-4e35-ac92-82a5cb48c62e"> 
 
    <td class=" sorting_1">Selection</td> 
 
    <td class=" "><a class="auditaction">Update</a></td> 
 
    </tr> 
 
    <tr class="subRow even" data-activitylogid="6459056" data-auditidentity="18487179" data-auditid="88506880-632f-4e17-bceb-ebd4e20e435a"> 
 
    <td class=" sorting_1">Procedure</td> 
 
    <td class=" "><a class="auditaction">Update</a></td> 
 
    </tr> 
 
    <tr class="subRow odd" data-activitylogid="6459056" data-auditidentity="18487181" data-auditid="a2768380-8c4a-4070-9834-900f95db77a2"> 
 
    <td class=" sorting_1">Procedure</td> 
 
    <td class=" "><a class="auditaction">Update</a></td> 
 
    </tr> 
 
    <tr class="subRow even" data-activitylogid="6459056" data-auditidentity="18487182" data-auditid="cb54deca-2bc4-4b71-ba5a-0e6d075b7b26"> 
 
    <td class=" sorting_1">Procedure</td> 
 
    <td class=" "><a class="auditaction">Update</a></td> 
 
    </tr> 
 
    <tr class="subRow odd" data-activitylogid="6459056" data-auditidentity="18487183" data-auditid="05803858-aaba-4f9b-9128-fc0c265cfaf6"> 
 
    <td class=" sorting_1">Procedure</td> 
 
    <td class=" "><a class="auditaction">Update</a></td> 
 
    </tr> 
 
</tbody></table>

最終的結果應該是這樣的

<table id="results"> 
<tbody role="alert" aria-live="polite" aria-relevant="all" data-auditidentity="18487179,18487183"> 
    <tr class="subRow odd" data-activitylogid="6459056" data-auditidentity="18487186" data-auditid="f831583e-d1a9-4e35-ac92-82a5cb48c62e"> 
    <td class=" sorting_1">Selection</td> 
    <td class=" "><a class="auditaction">Update</a></td> 
    </tr> 
    <tr class="subRow even" data-activitylogid="6459056" data-auditidentity="18487179,18487181,18487182,18487183" data-auditid="88506880-632f-4e17-bceb-ebd4e20e435a"> 
    <td class=" sorting_1">Procedure</td> 
    <td class=" "><a class="auditaction">Update</a></td> 
    </tr> 
</tbody></table> 

Answer 1

問題是選擇器$(resultsTable).find("tbody tr td:first:contains(" + tableName + ")")。 :first表示在整個文檔中選擇第一個td，而不是每行中的第一個td。這應該是:first-child。然後，您需要在此之後使用:first以在文檔中選擇所有這些中的第一個。所以整個選擇器應該是resultsTable.find("tbody tr td:first-child:contains(" + tableName + "):first")

順便說一句，你不需要換行resultsTable在$()。它已經是一個jQuery對象。

var uniqueKeys = []; 
 
var resultsTable = $('#results'); 
 
$(resultsTable).find('tbody > tr').each(function() { 
 

 
    var tableName = $(this).find('td:eq(0)').text(); 
 
    var tableAction = $(this).find('td:eq(1)').text(); 
 
    var uniqueKey = tableName + '#' + tableAction; 
 

 
    if (uniqueKeys.indexOf(uniqueKey) < 0) { 
 
    uniqueKeys.push(uniqueKey); 
 
    } else { 
 

 
    var initValue = '', 
 
     newCombinedValues = '', 
 
     auditidentity = ''; 
 
    initValue = resultsTable.find(" tr td:first-child:contains(" + tableName + ")").parent().attr('data-auditidentity'); 
 

 
    var activityLogId = $(this).data('activitylogid'); 
 
    auditidentity = $(this).data('auditidentity'); 
 

 
    newCombinedValues = initValue + "," + auditidentity; 
 

 
    resultsTable.find("tbody tr td:first-child:contains(" + tableName + "):first").parent().attr('data-auditidentity', newCombinedValues); 
 

 
    // After we have what we need, remove the combined row as we are combining the keys into one row 
 
    //$(this).remove(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="results"> 
 
<tbody role="alert" aria-live="polite" aria-relevant="all" data-auditidentity="18487179,18487183"> 
 
    <tr class="subRow odd" data-activitylogid="6459056" data-auditidentity="18487186" data-auditid="f831583e-d1a9-4e35-ac92-82a5cb48c62e"> 
 
    <td class=" sorting_1">Selection</td> 
 
    <td class=" "><a class="auditaction">Update</a></td> 
 
    </tr> 
 
    <tr class="subRow even" data-activitylogid="6459056" data-auditidentity="18487179" data-auditid="88506880-632f-4e17-bceb-ebd4e20e435a"> 
 
    <td class=" sorting_1">Procedure</td> 
 
    <td class=" "><a class="auditaction">Update</a></td> 
 
    </tr> 
 
    <tr class="subRow odd" data-activitylogid="6459056" data-auditidentity="18487181" data-auditid="a2768380-8c4a-4070-9834-900f95db77a2"> 
 
    <td class=" sorting_1">Procedure</td> 
 
    <td class=" "><a class="auditaction">Update</a></td> 
 
    </tr> 
 
    <tr class="subRow even" data-activitylogid="6459056" data-auditidentity="18487182" data-auditid="cb54deca-2bc4-4b71-ba5a-0e6d075b7b26"> 
 
    <td class=" sorting_1">Procedure</td> 
 
    <td class=" "><a class="auditaction">Update</a></td> 
 
    </tr> 
 
    <tr class="subRow odd" data-activitylogid="6459056" data-auditidentity="18487183" data-auditid="05803858-aaba-4f9b-9128-fc0c265cfaf6"> 
 
    <td class=" sorting_1">Procedure</td> 
 
    <td class=" "><a class="auditaction">Update</a></td> 
 
    </tr> 
 
</tbody></table>

Answer 2

你可以試試這片jQuery代碼，

var uniqueRows = {}; 
$('table tr').each(function(){ 
    var tdValue = $(this).find('td').eq(0).html(); 
    if(!uniqueRows[tdValue]){ 
     uniqueRows[tdValue] = $(this); 
    } else { 
     uniqueRows[tdValue].data('auditidentity', 
      uniqueRows[tdValue].data('auditidentity')+','+$(this).data('auditidentity')); 
     $(this).remove(); 
    } 
}); 

請確保您選擇正確的表你的代碼。 希望它有幫助

Answer 3

在這裏你去：

$(document).ready(function(){ 
 
\t 
 
    var uniqueKeys = []; 
 
var resultsTable = $('#results'); 
 
$(resultsTable).find('tbody > tr').each(function() { 
 

 
\t var currentAuditIdentity = $(this).data().auditidentity; 
 
    var currentActivityLogId = $(this).data().activitylogid; 
 
    var tableName = $(this).find('td:eq(0)').text(); 
 
    var tableAction = $(this).find('td:eq(1)').text(); 
 
    var uniqueKey = {'Name': tableName, 'Action': tableAction, 'AuditIdentity':currentAuditIdentity, 'ActivityLogId':currentActivityLogId}; 
 

 
\t var matchingElements = $.grep(uniqueKeys, function(item){ 
 
    \t \t return (item != null && item.Name == uniqueKey.Name && item.Action == uniqueKey.Action); 
 
    }); 
 
    if (matchingElements.length == 0) { 
 
    uniqueKeys.push(uniqueKey); 
 
    } 
 
    else { 
 
\t \t matchingElements[0].AuditIdentity += ',' + currentAuditIdentity; 
 
    // After we have what we need, remove the combined row as we are combining the keys into one row 
 
    $(this).remove(); 
 
    } 
 
}); 
 
//Finally, put the latest data back into the remaining unique rows 
 
$.each(uniqueKeys, function(index, value){ 
 
\t \t var item = $(resultsTable).find('tr').find('td:eq(0):contains("' + value.Name + '")').parent(); 
 
    item.data().auditidentity = value.AuditIdentity; 
 
}); 
 
//Just to show the data result. 
 
$('span#showArrayData').text(JSON.stringify(uniqueKeys)); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="results"> 
 
<tbody role="alert" aria-live="polite" aria-relevant="all" data-auditidentity="18487179,18487183"> 
 
    <tr class="subRow odd" data-activitylogid="6459056" data-auditidentity="18487186" data-auditid="f831583e-d1a9-4e35-ac92-82a5cb48c62e"> 
 
    <td class=" sorting_1">Selection</td> 
 
    <td class=" "><a class="auditaction">Update</a></td> 
 
    </tr> 
 
    <tr class="subRow even" data-activitylogid="6459056" data-auditidentity="18487179" data-auditid="88506880-632f-4e17-bceb-ebd4e20e435a"> 
 
    <td class=" sorting_1">Procedure</td> 
 
    <td class=" "><a class="auditaction">Update</a></td> 
 
    </tr> 
 
    <tr class="subRow odd" data-activitylogid="6459056" data-auditidentity="18487181" data-auditid="a2768380-8c4a-4070-9834-900f95db77a2"> 
 
    <td class=" sorting_1">Procedure</td> 
 
    <td class=" "><a class="auditaction">Update</a></td> 
 
    </tr> 
 
    <tr class="subRow even" data-activitylogid="6459056" data-auditidentity="18487182" data-auditid="cb54deca-2bc4-4b71-ba5a-0e6d075b7b26"> 
 
    <td class=" sorting_1">Procedure</td> 
 
    <td class=" "><a class="auditaction">Update</a></td> 
 
    </tr> 
 
    <tr class="subRow odd" data-activitylogid="6459056" data-auditidentity="18487183" data-auditid="05803858-aaba-4f9b-9128-fc0c265cfaf6"> 
 
    <td class=" sorting_1">Procedure</td> 
 
    <td class=" "><a class="auditaction">Update</a></td> 
 
    </tr> 
 
</tbody></table> 
 
<span id="showArrayData"></span>

這將解決您的問題。