javascript - jquery 突出显示表格中选定的行和列

Question

我想使用 jquery 在 html 表格中突出显示所选单元格的完整行和列。我遇到过许多使用 CSS 的示例，但找不到使用 jquery 的示例。请建议。请找到 fiddle :http://jsfiddle.net/0w9yo8x6/70/

下面是html代码:

<div>
<table>
<tr>
<td>
    <table border="1px">
     <tr>
               <td></td>
                    <td  bgcolor="grey">
                   <br>Column1
                    </td>


                   <td  bgcolor="grey">
                   <br>Column2
                    </td>


                   <td  bgcolor="grey">
                   <br>Column3
                    </td>


                   <td  bgcolor="grey">
                   <br>Column4
                    </td>


                   <td  bgcolor="grey">
                   <br>Column5
                    </td>
        </tr>  
   <tr>
   <td bgcolor="grey" >Row1</td> 

  <td>
     <table style="width:80%;margin:auto;border: 1px;">
     <tr>
     <td>
      Data1    </td>
     </tr>
     </table> 
</td> 

   <td>
     <table style="width:80%;margin:auto;border: 1px;">
     <tr>
     <td>
      Data2    </td>
     </tr>
     </table> 
</td> 

  <td>
     <table style="width:80%;margin:auto;border: 1px;">
     <tr>
     <td>
      Data3    </td>
     </tr>
     </table> 
</td> 

  <td>
     <table style="width:80%;margin:auto;border: 1px;">
     <tr>
     <td>
      Data4    </td>
     </tr>
     </table> 
</td> 

  <td>
     <table style="width:80%;margin:auto;border: 1px;">
     <tr>
     <td>
      Data5    </td>
     </tr>
     </table> 
</td> 

</tr>
   <tr>
   <td  bgcolor="grey">Row2</td> 

  <td>
     <table style="width:80%;margin:auto;border: 1px;">
     <tr>
     <td>
      Data1    </td>
     </tr>
     </table> 
</td> 

   <td>
     <table style="width:80%;margin:auto;border: 1px;">
     <tr>
     <td>
      Data2    </td>
     </tr>
     </table> 
</td> 

  <td>
     <table style="width:80%;margin:auto;border: 1px;">
     <tr>
     <td>
      Data3    </td>
     </tr>
     </table> 
</td> 

  <td>
     <table style="width:80%;margin:auto;border: 1px;">
     <tr>
     <td>
      Data4    </td>
     </tr>
     </table> 
</td> 

  <td >
     <table style="width:80%;margin:auto;border: 1px;">
     <tr>
     <td>
      Data5    </td>
     </tr>
     </table> 
</td> 

</tr>


   <tr>
   <td  bgcolor="grey">Row3</td> 

  <td>
     <table style="width:80%;margin:auto;border: 1px;">
     <tr>
     <td>
      Data1    </td>
     </tr>
     </table> 
</td> 

   <td>
     <table style="width:80%;margin:auto;border: 1px;">
     <tr>
     <td>
      Data2    </td>
     </tr>
     </table> 
</td> 

  <td>
     <table style="width:80%;margin:auto;border: 1px;">
     <tr>
     <td>
      Data3    </td>
     </tr>
     </table> 
</td> 

  <td >
     <table style="width:80%;margin:auto;border: 1px;">
     <tr>
     <td>
      Data4    </td>
     </tr>
     </table> 
</td> 

  <td>
     <table style="width:80%;margin:auto;border: 1px;">
     <tr>
     <td>
      Data5    </td>
     </tr>
     </table> 
</td> 

</tr>
</table></td></tr></table></div>

--编辑--我无法简化/修改我的表结构，因为它动态生成并从数据库中检索值并显示在单元格中。使用我在问题/ fiddle 中显示的现有结构 http://jsfiddle.net/0w9yo8x6/70/我需要实现行和列突出显示。谢谢。

Answer 1

CSS-Tricks 在此处介绍了如何使用 JS/jQuery 执行此操作的小教程:

http://css-tricks.com/row-and-column-highlighting/

这里显示了最好的方法:

$("table").delegate('td','mouseover mouseleave', function(e) {
    if (e.type == 'mouseover') {
      $(this).parent().addClass("hover");
      $("colgroup").eq($(this).index()).addClass("hover");
    }
    else {
      $(this).parent().removeClass("hover");
      $("colgroup").eq($(this).index()).removeClass("hover");
    }
});

#page-wrap { width: 600px; margin: 0 auto; }

table { border-collapse: collapse; width: 100%; }
td, th { border: 1px solid #ccc; padding: 10px; }

.slim { width: 88px; }
.hover { background-color: #eee; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table border="1" width="100%">
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
	<thead>
	    <tr>
	        <th>test</th>
	        <th></th>
	        <th></th>
	        <th></th>
	        <th></th>
	    </tr>
	</thead>
	<tbody>
    		<tr>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    		</tr>
    		<tr>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    		</tr>
    		<tr>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    		</tr>
    	</tbody>
</table>