使用jQuery更新TR的数据属性

时间:2017-07-06 22:49:27

标签: javascript jquery

我已经阅读了很多答案,我仍然不太确定如何更新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();
  }
});
&#13;
<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>
&#13;
&#13;
&#13;

结果应该是这个

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

3 个答案:

答案 0 :(得分: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对象。

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

答案 1 :(得分:1)

你走了:

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

这将解决您的问题。

答案 2 :(得分:0)

你可以试试这段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(); 
    }
 }); 

请确保在代码中选择正确的表格。 希望它有所帮助