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

Question

我想使用jquery突出显示html表中所选单元格的完整行和列。我遇到了很多使用CSS的例子但是找不到使用jquery。请建议。 请找小提琴：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>

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

Answer 1

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

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

这里显示了最佳方式：

＆＃13;

＆＃13;

$("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");
    }
});

＆＃13;

#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; }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以像这样简化表格：

<table>
  <tr><td>    <td>Column1<td>Column2<td>Column3<td>Column4<td>Column5
  <tr><td>Row1<td>Data1  <td>Data2  <td>Data3  <td>Data4  <td>Data5
  <tr><td>Row2<td>Data1  <td>Data2  <td>Data3  <td>Data4  <td>Data5
  <tr><td>Row3<td>Data1  <td>Data2  <td>Data3  <td>Data4  <td>Data5
</table>

很多人关闭了tr和td，但我选择不关注，因为HTML5中的optional closing tags，根据我的经验，HTML4中从不需要它们。 （Google的风格指南也建议使用omitting optional tags。）

所有演示文稿样式都应该在CSS样式表中完成，如下所示：

table {
  border-spacing: 0px;
}

td {
  border: 1px solid #bbb;
  padding: 0.2em;
}

tr:first-child, td:first-child {
  background: lightgrey;
}

.hovered {
  background: yellow;
}

使用jQuery，您可以向表格的hover添加td个事件，以切换hovered父行的td类以及所有{ {1}}在其专栏中：

td

Fiddle

---

的修改

由于无法更改布局，因此突出显示功能会更加困难。在这种情况下，您可以使用jQuery将多表布局更改为单个表：

$('td').hover(function() {
  $(this).parent('tr').toggleClass('hovered');
  $('td:eq('+this.cellIndex+')','tr').toggleClass('hovered');
});

这允许突出显示代码适用于您现有的HTML。

New Fiddle