CODEWITHSUNDEEP
javascriptjquerydatatablesangular-datatables
Rajasekhar
Rajasekhar

Reputation: 2455

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

AngularDatatables : How to select same Match Id's in two tables and disable the rows. Here I have select and compare two tables like one-one, one-many, many-one and many-many checkboxes, if Match Id's are matched in both tables, need to disable checkboxes and show one background color. I tried with below code, im getting some issue for comparing match ids

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

Upvotes: 1

Views: 199

Answers (1)

Swati
Swati

Reputation: 28522

In your current code you have use td:eq("+inx+") but here inx has value of tr index not td which you need to search .Instead you can simply use td:eq(1) this will refer matchid column and same for other value.

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>

Upvotes: 1

Related Questions