Сравнение данных столбца в 2 строках таблицы

Question

Мне нужно сравнить информацию в jQuery DataTable на initComplete.

. Как видно из HTML ниже, каждый tr имеет data-attribute из data-application-id , Для каждого идентификатора приложения есть 2 строки таблицы.

<table id="reportDataTable" class="table table-bordered table-hover">
    <thead>
        <tr>
            <th>Id</th>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </thead>
    <tbody>
        <tr data-application-id="1">
            <td>1</td>
            <td>Joe</td>
            <td>Bloggs</td>
        </tr>
        <tr data-application-id="1">
            <td>1</td>
            <td>Jane</td>
            <td>Bloggs</td>
        </tr>
        <tr data-application-id="2">
            <td>2</td>
            <td>Joe</td>
            <td>Bloggs</td>
        </tr>
        <tr data-application-id="2">
            <td>2</td>
            <td>Joe</td>
            <td>Bloggs</td>
        </tr>   
        <tr data-application-id="3">
            <td>3</td>
            <td>Joe</td>
            <td>Floggs</td>
        </tr>
        <tr data-application-id="3">
            <td>3</td>
            <td>Joe</td>
            <td>Bloggs</td>
        </tr>       
    </tbody>
</table>

Этот код ниже просматривает все строки таблицы в DataTable и регистрирует data-application-id.

$('#reportDataTable').DataTable({
    initComplete: function () {
        $('tbody tr').each(function () {
            console.log($(this).data("application-id"));
        });
    }
});

I'm не понимая, как сравнивать столбцы и добавлять класс или стиль к различным значениям. L oop необходимо сравнить каждый столбец с соответствующим столбцом в том же data-application-id и выделить оба столбца, если есть разница.

Может быть несколько столбцов, а не только Id, First Имя и Фамилия

Заранее спасибо

Answer 1

EDIT

$('#reportDataTable').DataTable({
    initComplete: function () {
	 var p=0;
    var applicationIdArray = [];
        $('tbody tr').each(function (i,v) {
            applicationIdArray.push($(this).data("application-id"));
        });
       //make it unique
       var uniqueIds = $.unique(applicationIdArray);
       $.each(uniqueIds,function(i,v){
       		var elements = $('tr[data-application-id="'+v+'"]');
          var tdArray = [];
		  var eachTdArray = [];
          $.each(elements,function(x,y){
          	var eachTd = $(y).find('td');
            tdArray.push(eachTd);
			
          });
		  $.each(tdArray,function(b,n){
				$.each(n,function(zz,xx){
					eachTdArray.push($(xx).text());
				});
				eachTdArray.push('br');
			});
				var cc = eachTdArray.indexOf("br");
				cc++;
					for(var mm=0;mm<cc;mm++){
						if(eachTdArray[mm]==eachTdArray[mm+cc]){
						
						}
						else{
							$('tbody tr:eq('+p+')').find('td:eq('+mm+')').css({'background-color':'red'});
							$('tbody tr:eq('+(p+1)+')').find('td:eq('+mm+')').css({'background-color':'red'});
						}
					}
				p=p+2;
       });
    }
});

<table id="reportDataTable" class="table table-bordered table-hover">
    <thead>
        <tr>
            <th>Id</th>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </thead>
    <tbody>
        <tr data-application-id="1">
            <td>1</td>
            <td>Joe</td>
            <td>Bloggs</td>
        </tr>
        <tr data-application-id="1">
            <td>1</td>
            <td>Jane</td>
            <td>Bloggs</td>
        </tr>
        <tr data-application-id="2">
            <td>2</td>
            <td>Joe</td>
            <td>Bloggs</td>
        </tr>
        <tr data-application-id="2">
            <td>2</td>
            <td>Joe</td>
            <td>Bloggs</td>
        </tr>   
        <tr data-application-id="3">
            <td>3</td>
            <td>Joe</td>
            <td>Floggs</td>
        </tr>
        <tr data-application-id="3">
            <td>3</td>
            <td>Joe</td>
            <td>Bloggs</td>
        </tr>       
    </tbody>
</table>

<script
  src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
  integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
  crossorigin="anonymous"></script>
  <script src = "https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

Answer 2

Хитрость заключается в добавлении атрибута класса CSS только для кода к столбцам, которые вы хотите проверить - см. html ниже. Это дает вам немедленный способ обращения к столбцам - вроде как с использованием атрибута данных, но использование селекторов классов происходит быстрее и на большом наборе данных, что может быть важно.

Затем вам нужно получить и перебрать значения col, отмечая непосредственное предыдущее значение в каждом случае - когда вы обнаружите разницу, вы помечаете все соответствующие классы в группе как разные. И вам нужно знать, когда вы находитесь на первом проходе в группе и столбце.

Я использовал массив 'cols', чтобы указать селекторы проверяемых столбцов - это явно расширяемо, если учесть, что в реальном сценарии использования больше столбцов.

Выполнить фрагмент в полноэкранном режиме, в противном случае консоль затемняет таблицу.

var groups = [],
  pass = 1,
  prev,
  rows = 0,
  cols = ['col1', 'col2', 'col3']; // Handy css class markers of cols we wish to examine, results,    
/*
Prepare a list of rows with 2+ entries matching on data-application-id
*/
$('tbody tr').each(function() {
  var idx = parseInt($(this).data("application-id"), 10);

  // if the slot has a value add one, or set to 1 if first hit
  groups[idx] = (groups[idx] ? groups[idx] + 1 : 1);

});

/*
Walk through the identified TR groups and look for differences. If we find a 
difference we use the classes that we added for convenience to apply some UX.
*/

for (var i = 0, max = groups.length; i < max; i = i + 1) {

  if (groups[i] && groups[i] > 1) { // could be a gappy array, and we only process items with 2+ entries

    console.log('Process group ' + i + ' count of elements =' + groups[i])

    prev = ['-x-', '-x-', '-x-']; // Used to note previous col values in same-row groups. One entry per slot in cols array, initial values all set to an unlikely value. Must happen here as reset oer group-col pass.

    pass = 1 // reset first pass flag - needed so we know not to be choosey on first pass when data always changes

    $('tbody tr[data-application-id="' + i + '"]').each(function() {
      rows = rows + 1;

      for (var c = 0, maxC = cols.length; c < maxC; c = c + 1) {

        var thisVal = $(this).find('.' + cols[c]).html();

        console.log('Check col slot ' + c + ' matching class ' + cols[c] + ' with val=' + thisVal + ' vs prev=' + prev[c])

        if (pass !== 1 && thisVal !== prev[c]) {

          console.log('Difference detected !')

          // found a difference, mark it difference
          $('tbody tr[data-application-id="' + i + '"]').find('.' + cols[c]).css({
            backgroundColor: 'cyan'
          })
        }
        prev[c] = thisVal; // note this value for next pass
      }

      pass = pass + 1;

    })
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="reportDataTable" class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>Id</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr data-application-id="1">
      <td class='col1'>1</td>
      <td class='col2'>Joe</td>
      <td class='col3'>Bloggs</td>
    </tr>
    <tr data-application-id="1">
      <td class='col1'>1</td>
      <td class='col2'>Jane</td>
      <td class='col3'>Bloggs</td>
    </tr>
    <tr data-application-id="2">
      <td class='col1'>2</td>
      <td class='col2'>Joe</td>
      <td class='col3'>Bloggs</td>
    </tr>
    <tr data-application-id="2">
      <td class='col1'>2</td>
      <td class='col2'>Joe</td>
      <td class='col3'>Bloggs</td>
    </tr>
    <tr data-application-id="3">
      <td class='col1'>3</td>
      <td class='col2'>Joe</td>
      <td class='col3'>Floggs</td>
    </tr>
    <tr data-application-id="3">
      <td class='col1'>3</td>
      <td class='col2'>Joe</td>
      <td class='col3'>Bloggs</td>
    </tr>
    <tr data-application-id="1">
      <td class='col1'>1</td>
      <td class='col2'>Joel</td>
      <td class='col3'>Bloggs</td>
    </tr>
    <tr data-application-id="3">
      <td class='col1'>3</td>
      <td class='col2'>Joe</td>
      <td class='col3'>Bloges</td>
    </tr>
  </tbody>
</table>