javascript - 突出显示和禁用第一个和第二个表中的行，所选数据相同

Question

有两个表example1和example2，以及复选框>>如果检查第一个表中的一行并选择第二个表中的一行。并点击“匹配记录”按钮。如果两条线相等，则需要用颜色突出显示该行并禁用复选框。我尝试过并卡住了，请建议解决方案，有时第一个表行匹配第二个表的多行。

    $('#example').DataTable({
    'columnDefs': [{
        'targets': 0,
        'searchable': false,
        'orderable': false,
        'className': 'dt-body-center',
        'render': function(data, type, full, meta) {
            return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
        }
    }],
    'order': [
        [1, 'asc']
    ]
});
$('#example1').DataTable({
    'columnDefs': [{
        'targets': 0,
        'searchable': false,
        'orderable': false,
        'className': 'dt-body-center',
        'render': function(data, type, full, meta) {
            return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
        }
    }],
    'order': [
        [1, 'asc']
    ]
});

var table = $('#example').DataTable();

$('#example tbody').on('click', 'tr', function() {
    alert(table.row(this).data());
});

var table2 = $('#example1').DataTable();

$('#example1 tbody').on('click', 'tr', function() {
    alert(table2.row(this).data());
});

$("#matchedRecords").on('click', function() {
    $('#example tbody tr').each(function() {
        var row = $(this).text();
        var isChecked = $(this).find("input:checkbox").is(":checked");

        $('#example1 tbody tr').each(function() {
            var _t = $(this);

            if (row == _t.text() && isChecked) {
                _t.prop({
                    'disabled': true,
                    background: red
                });
            }
        });
    });
});

小提琴

标签： javascriptjquery

Answer 1

我已经改变了你的matchedRecords功能，所以它看起来像这样：

$("#matchedRecords").on('click', function() {

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

演示