Wholly - Highlight table rows and columns on hover

Wholly is a jQuery plugin to highlight table rows and columns on hover with rowspan and colspan support.

It is a jQuery plugin for triggering table column mouseenter and mouseleave events. Wholly is used for highlighting the entire table column. Wholly supports tables with colspan and rowspan attributes.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: github.com

1. INCLUDE JS FILES

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="../jquery.wholly.js"></script>

2. HTML

<table>
	<thead>
		<tr>
			<th></th>
			<th></th>
			<th></th>
			<th></th>
			<th></th>
		</tr>
		<tr>
			<th></th>
			<th></th>
			<th></th>
			<th></th>
			<th></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
			<td></td>
			<td colspan="2"></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td colspan="2"></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</tfoot>
</table>

3. JAVASCRIPT

$(function () {
	var table = $('table');

	table.wholly();

	table.on('wholly.mouseenter', 'td, th', function () {
		$(this).addClass('wholly-highlight');
	});
	table.on('wholly.mouseleave', 'td, th', function () {
		$(this).removeClass('wholly-highlight');
	});
});