[Solved] Table Row Hover with Rowspan

[rvencu]

Hi, I have a case with very complicated table (generated using the wordpress Tablepress plugin) which has multiple rowspans and colspans on various parts of the table. The script above is not good enough so I came with an improved one that works well on my table here http://ivory.dentfix.ro/lista-preturi/

Here is the code:
var el;
var maxCol;
jQuery(function() {
jQuery("td").hover(function() {
el = jQuery(this);
maxCol = colCnt(el.closest('table').find('tr:first'));
if (colCnt(el.parent()) < maxCol ) {
markUp(el.parent().prevAll('tr:has(td[rowspan]):first'),maxCol-colCnt(el.parent()));
}
}, function() {
el.parent().prevAll('tr:has(td[rowspan])').find('td[rowspan]').removeClass("hover");
});
});
function colCnt(elem) {
var colCount = 0;
jQuery (elem.children()).each(function () {
if ($(this).attr('colspan')) {
colCount += +$(this).attr('colspan');
} else {
colCount++;
}
});
return colCount;
};
function markUp (elem,n) {
maxCol = colCnt(elem.closest('table').find('tr:first'));
elem.find('td[rowspan]').slice(0,n).addClass("hover");
if (colCnt(elem)<maxCol) {
markUp (elem.prevAll('tr:has(td[rowspan]):first'),maxCol-colCnt(elem));
}
}

[paulofsis]

Hello Chris

I’m new to css.
Please, It is possible to select all records related to </ td>

Thank You.

Paulo

[paulofsis]

Hello Chris

I’m new to css.
Please, It is possible to select all records related to </ td>

Thank You.

Paulo

[paulofsis]

I did as follows:

body { padding: 1em; }

table { width: 100%; border-collapse: collapse; }

td, th { padding: .25em; border: 1px solid black; }

tbody:hover, tr.hover, th.hover, td.hover, tr.hoverable:hover { background-color: red; }

Thank You.

Paulo

[Author]

Posts