Highlight tr elements on hover (jQuery)
HTML
<table border="1" bordercolor="#eeeeee" cellpadding="5" cellspacing="0" style="width: 100%; table-layout: fixed; font-size: inherit;">
<col>
<col style="width: 180px;">
<col style="width: 150px;">
<col style="width: 70px;">
<thead>
<tr>
<th align="center" rowspan="2" style="width: 25px; font-weight: 500; position: sticky; top: 0px; background-color: rgb(255, 255, 255);">
№
</th>
<th align="center" rowspan="2" colspan="3" style="width: 500px; font-weight: 500; position: sticky; top: 0px; background-color: rgb(255, 255, 255);">Врач</th>
<th align="center" style="font-weight: 500; position: sticky; top: 0px; background-color: rgb(255, 255, 255);">
<div style="height: 21px;">14.11.2018</div>
</th>
<th align="center" style="font-weight: 500; position: sticky; top: 0px; background-color: rgb(255, 255, 255);">
<div style="height: 21px;">15.11.2018</div></th><th align="center" style="font-weight: 500; position: sticky; top: 0px; background-color: rgb(255, 255, 255);"><div style="height: 21px;">16.11.2018</div></th><th align="center" style="font-weight: 500; position: sticky; top: 0px; background-color: rgb(255, 255, 255);"><div style="height: 21px;">17.11.2018</div></th><th align="center" style="font-weight: 500; position: sticky; top: 0px; background-color: rgb(255, 255, 255);"><div style="height: 21px;">18.11.2018</div></th><th align="center" style="font-weight: 500; position: sticky; top: 0px; background-color: rgb(255, 255, 255);"><div style="height: 21px;">19.11.2018</div></th><th align="center" style="font-weight: 500; position: sticky; top: 0px; background-color: rgb(255, 255, 255);"><div style="height: 21px;">20.11.2018</div></th><th align="center" style="font-weight: 500; position: sticky; top: 0px; background-color: rgb(255, 255, 255);"><div style="height: 21px;">21.11.2018</div></th><th align="center" style="font-weight: 500; position: sticky; top: 0px; background-color: rgb(255, 255,...
CSS
body {
padding: 50px;
}
table {
width: 100%;
border-collapse: collapse;
}
td, th {
padding: 20px;
border: 1px solid black;
}
.hover {
background-color: blue;
}
JavaScript
jQuery(function ($) {
var tableRowClasses = function (sel) {
var num = 0;
sel = $(sel);
$.each(sel, function (i, v) {
// Bind hover event handler
$(v).hover(function () {
var ta = "." + $(v).attr("class");
$(".hover").removeClass("hover");
$(ta).addClass("hover");
});
// Add row classes
var hasClass = typeof $(v).attr("class") !== "undefined";
if (hasClass && $(v).attr("class").search(/row/) > -1) return true;
else {
var css = "row-" + num;
$(v).addClass(css);
if ($(v).find("td[rowspan]").length > 0) {
var rowS = parseInt($($(v).find("td[rowspan]")[0]).attr("rowspan"), 10),
start = $.inArray(v, sel);
for (i = start; i < start + rowS; i++) {
$(sel[i]).addClass(css);
}
}
num++;
}
});
};
$(document).ready(function () {
tableRowClasses(".tb tbody tr");
});
});