$('table').delegate('td', 'mouseenter mouseleave', function(e) { var self = $(this); var i = self.index(); var parent = self.parent(); var tb = $('table'); var rows = tb.find('td:nth-child(' + (i + 1) + ')'); switch (e.type) { case 'mouseenter': parent.find('td').addClass('hover'); rows.addClass('hover'); break; case 'mouseleave': parent.find('td').removeClass('hover'); rows.removeClass('hover'); break; } });
<table> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr> </table>
.hover { background-color: yellow !important; color: #000; } td {cursor: pointer} td:hover {background-color: red !important}