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>

-编辑-我无法简化/修改我的表结构，因为它是动态生成并从单元格中的数据库和显示中检索值。 使用我在问题/小提琴中显示的现有结构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> 

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 s和td s，但我选择不这样做，因为它们是HTML5中的可选关闭标记 ，而根据我的经验，HTML4从来不需要它们。 （Google的风格指南还建议省略可选标签 。）

所有演示样式都应在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 ，这将切换td的父行及其列中所有td的hovered类：

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

小提琴

---

编辑

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

 $('table:first-child').replaceWith($('table', 'table:first-child').html()); $('table').each(function() { var td= $('td', this); if(td.length === 1) { $(this).replaceWith(td.html()); } }); 

这使突出显示代码可以在您现有的HTML上运行。

新提琴