AngularDatatables: как выбрать одинаковые идентификаторы соответствия в двух таблицах и отключить флажок

AngularDatatables: как выбрать одинаковые идентификаторы соответствия в двух таблицах и отключить строки. Здесь я выбрал и сравнил две таблицы, такие как флажки «один-один», «один-многие», «многие-один» и «многие-многие». Если идентификаторы соответствия совпадают в обеих таблицах, необходимо отключить флажки и показать один цвет фона. Я пробовал с приведенным ниже кодом, у меня возникла проблема со сравнением идентификаторов совпадений.

$('#firstTable tbody input:checked').each(function() {
        var inx = $(this).closest("tr").index();
  if($('#secondTable tbody tr:eq('+inx+') input').is(":checked")){
    var table1Values = $('#firstTable tbody input:checked').closest("tr td:eq("+inx+")").next("td");
    var table2Values = $('#secondTable tbody input:checked').closest("tr td:eq("+inx+")").next("td");
    if(table1Values == table2Values){
    $('#secondTable tbody tr:eq('+inx+') input').prop({'disabled':true})
    $('#secondTable tbody tr:eq('+inx+')').css("background-color","red")
    $(this).prop({'disabled':true})
    $(this).closest('tr').css("background-color","red")
    }
  }
})

Stackblitz


javascript jquery datatables angular-datatables
person Rajasekhar    schedule 06.12.2020    source источник
comment
Привет, что есть у table1Values? Также здесь нужно проверить td содержание ?   -  person Swati    schedule 06.12.2020
comment
Я пытаюсь получить идентификатор совпадения в первой таблице и сравниваю идентификатор соответствия второй таблицы.   -  person Rajasekhar    schedule 06.12.2020

Ответы (1)


arrow_upward
1
arrow_downward

В вашем текущем коде вы используете td:eq("+inx+"), но здесь inx имеет значение индекса tr, а не td, которое вам нужно искать. Вместо этого вы можете просто использовать td:eq(1), это будет ссылаться на столбец matchid и то же самое для другого значения.

Demo Code : 

function getMatchedRecords() {

  $('#firstTable tbody input:checked').each(function() {
    var inx = $(this).closest("tr").index();
    if ($('#secondTable tbody tr:eq(' + inx + ') input').is(":checked")) {
      //get value from checkboxes
      var table1Values = $(this).val();
      //get td(1) from second table(matchid)
      var table2Values = $("#secondTable tbody tr:eq(" + inx + ") td:eq(1)").text().trim();
      if (table1Values == table2Values) {
        $('#secondTable tbody tr:eq(' + inx + ') input').prop({
          'disabled': true
        })
        $('#secondTable tbody tr:eq(' + inx + ')').css("background-color", "red")
        $(this).prop({
          'disabled': true
        })
        $(this).closest('tr').css("background-color", "red")
      }
    }
  })
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <button onclick="getMatchedRecords()">MatchRecords</button>
  <div>
    <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover" id="firstTable">
      <thead>
        <tr>
          <th><input type="checkbox"></th>
          <th>MatchId</th>
          <th>First name</th>
          <th>Last name</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let person of persons">
          <td><input type="checkbox" class="checkboxCls" name="id" [checked]="isChecked" value="1"></td>
          <td>1</td>
          <td>ABC</td>
          <td>SOMTHING</td>
        </tr>
        <tr *ngFor="let person of persons">
          <td><input type="checkbox" class="checkboxCls" name="id" [checked]="isChecked" value="2"></td>
          <td>2</td>
          <td>ABC2</td>
          <td>SOMTHING</td>
        </tr>
      </tbody>
    </table>
    <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover" id="secondTable">
      <thead>
        <tr>
          <th><input type="checkbox"></th>
          <th>MatchId</th>
          <th>First name</th>
          <th>Last name</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let person of persons">
          <td><input type="checkbox" class="checkboxCls" name="id" [checked]="isChecked" value="1"></td>
          <td>1</td>
          <td>ABC</td>
          <td>SOMTHING</td>
        </tr>
        <tr *ngFor="let person of persons">
          <td><input type="checkbox" class="checkboxCls" name="id" [checked]="isChecked" value="2"></td>
          <td>2</td>
          <td>ABC2</td>
          <td>SOMTHING</td>
        </tr>
        <tr *ngFor="let person of persons">
          <td><input type="checkbox" class="checkboxCls" name="id" [checked]="isChecked" value="4"></td>
          <td>4</td>
          <td>ABC4</td>
          <td>SOMTHING</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

person Swati    schedule 06.12.2020