Differing cells in the table line
-
Available http://jsfiddle.net/vrLgg47L/2/ ♪ In the allocation of the 2nd line of the table, there is a need to add a violin that will be red, all discrepancies between the two lines.
<!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;
}
-
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"); } } } });});
http://jsfiddle.net/nwqbcxju/
