AngularDatatables：如何 select 在两个表中匹配相同的 ID 并禁用复选框

Question

AngularDatatables : 如何 select 在两个表中匹配相同的 ID 并禁用行。这里我有 select 并比较两个表，如一对一、一对多、多对一和多对多复选框，如果匹配 ID 在两个表中都匹配，则需要禁用复选框并显示一种背景颜色。我尝试使用以下代码，我在比较匹配 ID 时遇到了一些问题

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

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

AngularDatatables：如何 select 在两个表中匹配相同的 ID 并禁用复选框

AngularDatatables : How to select same Match Id's in two tables and disable the checkbox

javascript

jquery

datatables

angular-datatables