JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<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>
CSS
#myTable tbody tr:hover {
background: #eee;
text-align: center;
}
#myTable tbody tr {
text-align: center;
}
.different{
color:red;
}
}
JavaScript
$(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);
});
console.log(arr);
$('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");
}
}
}
});
});