Highlight the rows of Selected row source id with destination id table rows

Question

If I checked the left table checkbox id and if it matches the destination table id or ids (single or multiple). Need to highlight the matched right table rows. I tried and unable to highlight the right side table rows.

  $(function(){

  $(":checkbox").change(function() {
        $(this).closest("tr").toggleClass("highlight", this.checked)
    })

    $('#btn').on('click', function(e){
        $('#left_table tbody tr').each(function(){
            var row=$(this).html();
            $('#right_table tbody tr').each(function(){
                if(row==$(this).html())
                //$(this).remove();
                $(this).css("background","red");
            });
        });
    });
});

Fiddle

Answer 1

1 . Use .text() instead of .html() for comparison

2 . Many places there is missing tags like open close tr and td , so correct it.

3 . find checked checkbox and compare, if it is checked then add in condition

Note : instead of css("background","red") , you can give style to some class , and add/remove that class

 $(function(){ $(":checkbox").change(function() { $(this).closest("tr").toggleClass("highlight", this.checked) }) $('#btn').on('click', function(e){ $('#right_table tbody tr').css("background","#fff"); $('#left_table tbody tr').each(function(){ var row=$(this).text(); var isChecked = $(this).find("input:checkbox").is(":checked"); $('#right_table tbody tr').each(function(){ var _t = $(this); if(row==_t.text() && isChecked){ _t.css("background","red"); } //$(this).remove(); }); }); }); });

 table{float:left;margin:5px;} label { display: block; } .highlight { background-color: yellow; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="left_table" border='1'> <thead><tr><th></th><th>Column One</th><th>Column Two</th></tr></thead> <tbody> <tr><td><input type="checkbox" id="chkbox1"/></td><td>One</td><td>Two</td></tr> <tr><td><input type="checkbox" id="chkbox2"/></td><td>Three</td><td>Four</td></tr> </tbody> </table> <table id="right_table" border='1'> <thead><tr><th>Column One</th><th>Column Two</th></tr></thead> <tbody> <tr><td>One</td><td>Two</td></tr> <tr><td>Three</td><td>Four</td></tr> <tr><td>Five</td><td>Six</td></tr> <tr><td>Three</td><td>Four</td></tr> <tr><td>Five</td><td>Six</td></tr> <tr><td>Three</td><td>Four</td></tr> <tr><td>Five</td><td>Six</td></tr> <tr><td>One</td><td>Two</td></tr> </tbody> </table> <br /><br /><br /><br /> <button id="btn">Highlight Rows</button>

Answer 2

I think this is more elegant

 $(function() { const $leftTBody = $('#left_table tbody'); const $rightTBody = $('#right_table tbody'); $leftTBody.on("change", ":checkbox", function() { $(this).closest("tr").toggleClass("highlight", this.checked) }); $('#btn').on('click', function(e) { $('tr',$rightTBody).toggleClass("red", false); // turn off $(':checkbox:checked', $leftTBody).each(function() { const text = $(this).closest("tr").text().replace(/\\s+/g,""); $("tr", $rightTBody).filter(function() { return $(this).text().replace(/\\s+/g,"") == text; }) .toggleClass("red") }); }); });

 table { float: left; margin: 5px; } label { display: block; } .highlight { background-color: yellow; } .red { background-color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="left_table" border='1'> <thead> <tr> <th></th> <th>Column One</th> <th>Column Two</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" id="chkbox1" /></td> <td>One</td> <td>Two</td> </tr> <tr> <td><input type="checkbox" id="chkbox2" /></td> <td>Three</td> <td>Four</td> </tr> </tbody> </table> <table id="right_table" border='1'> <thead> <tr> <th>Column One</th> <th>Column Two</th> </tr> </thead> <tbody> <tr> <td>One</td> <td>Two</td> </tr> <tr> <td>Three</td> <td>Four</td> </tr> <tr> <td>Five</td> <td>Six</td> </tr> <tr> <td>Three</td> <td>Four</td> </tr> <tr> <td>Five</td> <td>Six</td> </tr> <tr> <td>Three</td> <td>Four</td> </tr> <tr> <td>Five</td> <td>Six</td> </tr> <tr> <td>One</td> <td>Two</td> </tr> </tbody> </table> <br /><br /><br /><br /> <button id="btn">Highlight Rows</button>