There is a given code . When selecting 2 rows of the table, you need to add a script that will highlight in red, all the mismatches between these two rows.

<!DOCKTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <div> <table id="myTable"> <thead> <tr> <th></th> <th>name</th> <th>id</th> <th>remark</th> <th>status</th> </tr> </thead> <tbody> <tr> <td> <input type="checkbox"/> </td> <td>Test</td> <td>235</td> <td>add</td> <td>D</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>Test</td> <td>123</td> <td>add</td> <td>A</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>Test</td> <td>235</td> <td>add</td> <td>D</td> </tr> </tbody> </table> </div> </body> </html> $(function() { $('input:checkbox').change(function() { var maxAllowed = 2; var cnt = $('input:checkbox:checked').length; if (cnt > maxAllowed) { $(this).prop("checked", ""); } }); }); $(function() { $('#myTable tr').click(function(event) { if (event.target.type !== 'checkbox') { $(':checkbox', this).trigger('click'); } }); }); #myTable tbody tr:hover { background: #eee; text-align: center; } #myTable tbody tr { text-align: center; }
  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

2 answers 2

CSS:

 .different{ color:red; }

Jquery:

 $(function() { var arr = []; $.each($("#myTable tr"), function(index) { if(index == 0) return true;//избавляСмся ΠΎΡ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² столбцов Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ (<th>) var num_tr = index; var str = []; $.each($(this).find("td"), function(index) { if($(this).find("input:checkbox").length > 0) $(this).find("input:checkbox").attr("data-num",num_tr); //строчку Π²Ρ‹ΡˆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ, Π½ΠΎ Ρ‚ΠΎΠ³Π΄Π° Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΊΠΎΠ΄ для вычислСния строки ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° checkbox if(index == 0) return true; //избавляСм массив ΠΎΡ‚ Π·Π½Π°ΠΊΠΎΠ² ΠΈΠ· ячСйки с checkbox str.push($(this).text()); }); arr.push(str); }); $('input:checkbox').change(function() { $("#myTable td").removeClass("different"); if($(this).is(':checked') && $("#myTable input:checked").length > 1 && $("#myTable input:checked").length < 3){ // Π΄Π΅Π»Π°Π΅ΠΌ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΡƒ Π½Π° Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π΄Π²ΡƒΡ… строк. Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π» Ρ€Π°Π±ΠΎΡ‚Π°Π», Π½ΡƒΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ послСдний Π½Π°ΠΆΠ°Ρ‚Ρ‹ΠΉ ΠΈ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ checkbox Π±Ρ‹Π» Π²Ρ‚ΠΎΡ€Ρ‹ΠΌ ΠΈΠ· Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… Ρ€Π°Π½Π΅Π΅. $.each($("#myTable input:checked"), function(index){ window["str" + index] = $(this).attr("data-num"); }); for(var i = 0; i <=3 ; i++){ if(arr[str0-1][i] != arr[str1-1][i]){ $("#myTable tr:nth-child("+str0+") td:nth-child("+(i+2)+") ").addClass("different"); $("#myTable tr:nth-child("+str1+") td:nth-child("+(i+2)+") ").addClass("different"); } } } }); });

Jsfiddle

    I think that this will suit you.

    In CSS add

     td.diff { border: 1px solid red; }

    And JS:

     $(function() { $('input:checkbox').change(function() { var maxAllowed = 2; cleanHighlight(); // чистим Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΌΠ΅Ρ‡Π΅Π½Π½ΠΎΠ΅ Ρ€Π°Π½Π΅Π΅ var cnt = $('input:checkbox:checked').length; if (cnt > maxAllowed) { $(this).prop("checked", ""); } else if (cnt==maxAllowed) { // Ссли ΠΎΡ‚ΠΌΠ΅Ρ‡Π΅Π½ΠΎ максимум Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠ³ΠΎ - Π½Π°Ρ‡Π½Π΅ΠΌ сравнСниС compareRows(); } }); }); // чистка - ΡƒΠ±ΠΈΡ€Π°Π΅ΠΌ всС выдСлСния function cleanHighlight() { $('#myTable td.diff').removeClass('diff'); } function compareRows() { // для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ чСкбокса ΠΈΠ΄Π΅ΠΌ Π²Π²Π΅Ρ€Ρ… ΠΏΠΎ Π΄Π΅Ρ€Π΅Π²Ρƒ Π΄ΠΎ tr ΠΈ Π±Π΅Ρ€Π΅ΠΌ всС siblings (ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ всС td этой строки) var rOne = $('input:checkbox:checked').eq(0).parentsUntil('tr').siblings(); var rTwo = $('input:checkbox:checked').eq(1).parentsUntil('tr').siblings(); // ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΠΌ ΠΏΠΎ всСм td ΠΈ сравниваСм ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΌΡƒ ΠΈΡ… содСрТимоС for(i=0; i<=rOne.length; i++) { if (rOne.eq(i).html()!=rTwo.eq(i).html()) { // Ссли содСрТмиоС Ρ€Π°Π·Π½ΠΎΠ΅ - добавляСм CSS класс rOne.eq(i).addClass('diff'); rTwo.eq(i).addClass('diff'); } } }

    However, please note that this will work fine if you need to compare 2 lines. If there are more lines to compare, then it will be necessary to correct ...