Блог

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

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

#javascript #jquery #datatables #angular-datatables

#javascript #jquery #таблицы данных #angular-datatables

Вопрос:

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

Комментарии:

1. Привет, что такое table1Values has ? Также здесь вам нужно проверить td содержимое?

2. Я пытаюсь получить идентификатор соответствия в первой таблице и сравнить идентификатор соответствия во второй таблице

Ответ №1:

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

Демонстрационный код :

 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>