Updating a data attribute of a TR with jQuery

Question

I have read many of the answers and I am still not quite sure how to update an attribute of a TR. The idea of my code is to combine similar rows into one while updating the first row's data-auditidentity attribute.

What in the blue blazes am I missing?? The end result should be one table row for procedure and the data-auditidentity property should have all four comma separated keys. Trying to update using attr to have all four values comma separated fails.

 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> 

The END RESULT SHOULD BE THIS

<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

The problem is the selector $(resultsTable).find("tbody tr td:first:contains(" + tableName + ")") . :first means to select the first td in the whole document, not the first td in each row. This should be :first-child . Then you need to use :first after that to select the first of all these in the document. So the whole selector should be resultsTable.find("tbody tr td:first-child:contains(" + tableName + "):first")

BTW, you don't need to wrap resultsTable in $() . It's already a jQuery object.

 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

Here you go:

 $(document).ready(function(){ var uniqueKeys = []; var resultsTable = $('#results'); $(resultsTable).find('tbody > tr').each(function() { 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}; var matchingElements = $.grep(uniqueKeys, function(item){ return (item != null && item.Name == uniqueKey.Name && item.Action == uniqueKey.Action); }); if (matchingElements.length == 0) { uniqueKeys.push(uniqueKey); } else { 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){ 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> 

This will solve your problem.

Answer 3

You can try this piece of jQuery code,

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

Please make sure you select correct table in your code. Hope it helps