在html表格中突出显示鼠标悬停时选定的行和列

时间:2015-02-04 15:23:08

标签: javascript jquery html css

我需要在鼠标悬停时突出显示表格中单元格的行和列。生成的表格是动态的,我得到了 数据库中的值并显示在html表中。表的结构完全如下所示,我无法修改现有结构。 请使用我现有的html代码建议如何使用jquery / css突出显示表中的选定行和列。 请找到小提琴http://jsfiddle.net/0w9yo8x6/78/

以下是html代码:

<div>
<table border="1px">
<tr>
<td>
    <table style="width:100%">
        <tr title="Table Header">
        <td>
        Title
        </td>
        </tr>
    </table>
</td>
</tr>
<tr>
<td>
    <table border="1px">
        <tr>
         <td></td>
         <td bgcolor="grey">Header1</td>
         <td bgcolor="grey">Header2</td>
         <td bgcolor="grey">Header3</td>
         <td bgcolor="grey">Header4</td>
         <td bgcolor="grey">Header5</td>
         </tr>

    <tr>
         <td bgcolor="grey">Row1</td> 
         <td>
            <table>
            <tr>
            <td>
               Cell1  
            </td>
            </tr>
            <tr> 
            <td class='innerCell'>
            Inner cell1
            </td>
            </tr>
          </table> 
      </td> 
         <td>
            <table>
            <tr>
            <td>
               Cell1  
            </td>
            </tr>
            <tr> 
            <td class='innerCell'>
            Inner cell1
            </td>
            </tr>
          </table> 
      </td> 
         <td>
            <table>
            <tr>
            <td>
               Cell1  
            </td>
            </tr>
            <tr> 
            <td class='innerCell'>
            Inner cell1
            </td>
            </tr>
          </table> 
      </td> 
         <td>
            <table>
            <tr>
            <td>
               Cell1  
            </td>
            </tr>
            <tr> 
            <td class='innerCell'>
            Inner cell1
            </td>
            </tr>
          </table> 
      </td> 
         <td>
            <table>
            <tr>
            <td>
               Cell1  
            </td>
            </tr>
            <tr> 
            <td class='innerCell'>
            Inner cell1
            </td>
            </tr>
          </table> 
      </td> 
      </tr>

         <tr>
         <td bgcolor="grey">Row2</td> 
         <td>
            <table>
            <tr>
            <td>
               Cell2  
            </td>
            </tr>
            <tr> 
            <td class='innerCell'>
            Inner cell2
            </td>
            </tr>
          </table> 
      </td> 
         <td>
            <table>
            <tr>
            <td>
               Cell2  
            </td>
            </tr>
            <tr> 
            <td class='innerCell'>
            Inner cell2
            </td>
            </tr>
          </table> 
      </td> 
         <td>
            <table>
            <tr>
            <td>
               Cell2  
            </td>
            </tr>
            <tr> 
            <td class='innerCell'>
            Inner cell2
            </td>
            </tr>
          </table> 
      </td> 
         <td>
            <table>
            <tr>
            <td>
               Cell2  
            </td>
            </tr>
            <tr> 
            <td class='innerCell'>
            Inner cell2
            </td>
            </tr>
          </table> 
      </td> 
         <td>
            <table>
            <tr>
            <td>
               Cell2  
            </td>
            </tr>
            <tr> 
            <td class='innerCell'>
            Inner cell2
            </td>
            </tr>
          </table> 
      </td> 
      </tr>


         <tr>
         <td bgcolor="grey">Row3</td> 
         <td>
            <table>
            <tr>
            <td>
               Cell3  
            </td>
            </tr>
            <tr> 
            <td class='innerCell'>
            Inner cell3
            </td>
            </tr>
          </table> 
      </td> 
         <td>
            <table>
            <tr>
            <td>
               Cell3  
            </td>
            </tr>
            <tr> 
            <td class='innerCell'>
            Inner cell3
            </td>
            </tr>
          </table> 
      </td> 
         <td>
            <table>
            <tr>
            <td>
               Cell3  
            </td>
            </tr>
            <tr> 
            <td class='innerCell'>
            Inner cell3
            </td>
            </tr>
          </table> 
      </td> 
         <td>
            <table>
            <tr>
            <td>
               Cell3  
            </td>
            </tr>
            <tr> 
            <td class='innerCell'>
            Inner cell3
            </td>
            </tr>
          </table> 
      </td> 
         <td>
            <table>
            <tr>
            <td>
               Cell3  
            </td>
            </tr>
            <tr> 
            <td class='innerCell'>
            Inner cell3
            </td>
            </tr>
          </table> 
      </td> 
      </tr>
      </table>
      </td>
      </tr>
      </table>
      </div>

4 个答案:

答案 0 :(得分:8)

突出显示特定的行和列。对于列,我使用nth-child()作为选择器的一部分。希望这有帮助。

注意:我将类.myCell添加到第二级嵌套表的tds中,以便更轻松地使用jquery的选择器名称。

$(document).ready(function() {
    $('.myCell').on('mouseover', function() {
        $(this).closest('tr').addClass('highlight');
        $(this).closest('table').find('.myCell:nth-child(' + ($(this).index() + 1) + ')').addClass('highlight');
    });
    $('.myCell').on('mouseout', function() {
        $(this).closest('tr').removeClass('highlight');
        $(this).closest('table').find('.myCell:nth-child(' + ($(this).index() + 1) + ')').removeClass('highlight');
    });
});
.highlight {
    background-color:lightgray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <table border="1px">
        <tr>
            <td>
                <table style="width:100%">
                    <tr title="Table Header">
                        <td>
                            Title
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table border="1px">
                    <tr>
                        <td></td>
                        <td bgcolor="grey">Header1</td>
                        <td bgcolor="grey">Header2</td>
                        <td bgcolor="grey">Header3</td>
                        <td bgcolor="grey">Header4</td>
                        <td bgcolor="grey">Header5</td>
                    </tr>
                    
                    <tr>
                        <td bgcolor="grey" class="myCell">Row1</td> 
                        <td class="myCell">
                            <table>
                                <tr>
                                    <td>
                                        Cell1  
                                    </td>
                                </tr>
                                <tr> 
                                    <td class='innerCell'>
                                        Inner cell1
                                    </td>
                                </tr>
                            </table> 
                        </td> 
                        <td class="myCell">
                            <table>
                                <tr>
                                    <td>
                                        Cell1  
                                    </td>
                                </tr>
                                <tr> 
                                    <td class='innerCell'>
                                        Inner cell1
                                    </td>
                                </tr>
                            </table> 
                        </td> 
                        <td class="myCell">
                            <table>
                                <tr>
                                    <td>
                                        Cell1  
                                    </td>
                                </tr>
                                <tr> 
                                    <td class='innerCell'>
                                        Inner cell1
                                    </td>
                                </tr>
                            </table> 
                        </td> 
                        <td class="myCell">
                            <table>
                                <tr>
                                    <td>
                                        Cell1  
                                    </td>
                                </tr>
                                <tr> 
                                    <td class='innerCell'>
                                        Inner cell1
                                    </td>
                                </tr>
                            </table> 
                        </td> 
                        <td class="myCell">
                            <table>
                                <tr>
                                    <td>
                                        Cell1  
                                    </td>
                                </tr>
                                <tr> 
                                    <td class='innerCell'>
                                        Inner cell1
                                    </td>
                                </tr>
                            </table> 
                        </td> 
                    </tr>
                    
                    <tr>
                        <td bgcolor="grey" class="myCell">Row2</td> 
                        <td class="myCell">
                            <table>
                                <tr>
                                    <td>
                                        Cell2  
                                    </td>
                                </tr>
                                <tr> 
                                    <td class='innerCell'>
                                        Inner cell2
                                    </td>
                                </tr>
                            </table> 
                        </td> 
                        <td class="myCell">
                            <table>
                                <tr>
                                    <td>
                                        Cell2  
                                    </td>
                                </tr>
                                <tr> 
                                    <td class='innerCell'>
                                        Inner cell2
                                    </td>
                                </tr>
                            </table> 
                        </td> 
                        <td class="myCell">
                            <table>
                                <tr>
                                    <td>
                                        Cell2  
                                    </td>
                                </tr>
                                <tr> 
                                    <td class='innerCell'>
                                        Inner cell2
                                    </td>
                                </tr>
                            </table> 
                        </td> 
                        <td class="myCell">
                            <table>
                                <tr>
                                    <td>
                                        Cell2  
                                    </td>
                                </tr>
                                <tr> 
                                    <td class='innerCell'>
                                        Inner cell2
                                    </td>
                                </tr>
                            </table> 
                        </td> 
                        <td class="myCell">
                            <table>
                                <tr>
                                    <td>
                                        Cell2  
                                    </td>
                                </tr>
                                <tr> 
                                    <td class='innerCell'>
                                        Inner cell2
                                    </td>
                                </tr>
                            </table> 
                        </td> 
                    </tr>
                    
                    
                    <tr>
                        <td bgcolor="grey" class="myCell">Row3</td> 
                        <td class="myCell">
                            <table>
                                <tr>
                                    <td>
                                        Cell3  
                                    </td>
                                </tr>
                                <tr> 
                                    <td class='innerCell'>
                                        Inner cell3
                                    </td>
                                </tr>
                            </table> 
                        </td> 
                        <td class="myCell">
                            <table>
                                <tr>
                                    <td>
                                        Cell3  
                                    </td>
                                </tr>
                                <tr> 
                                    <td class='innerCell'>
                                        Inner cell3
                                    </td>
                                </tr>
                            </table> 
                        </td> 
                        <td class="myCell">
                            <table>
                                <tr>
                                    <td>
                                        Cell3  
                                    </td>
                                </tr>
                                <tr> 
                                    <td class='innerCell'>
                                        Inner cell3
                                    </td>
                                </tr>
                            </table> 
                        </td> 
                        <td class="myCell">
                            <table>
                                <tr>
                                    <td>
                                        Cell3  
                                    </td>
                                </tr>
                                <tr> 
                                    <td class='innerCell'>
                                        Inner cell3
                                    </td>
                                </tr>
                            </table> 
                        </td> 
                        <td class="myCell">
                            <table>
                                <tr>
                                    <td>
                                        Cell3  
                                    </td>
                                </tr>
                                <tr> 
                                    <td class='innerCell'>
                                        Inner cell3
                                    </td>
                                </tr>
                            </table> 
                        </td> 
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

答案 1 :(得分:4)

由于您将表格嵌入两个深层,因此您的CSS应如下所示:

table table tr:hover td {
  background-color: #fbc93d;
}

这是一个基于你的小提琴的例子:

Example

答案 2 :(得分:0)

在你的css中试试这个:

td table td:hover{background-color:gray;}

答案 3 :(得分:0)

Example

将表格放在表格中并不是很好的做法,请查看如何使用div和大纲。另请参阅如何使用thead,tbody和colgroups创建表。

希望我能提供帮助。

下面只是HTML代码,需要添加thead和tbody,我会让你想出那个。

    <table border="1px">
    <colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
    <tr>
     <td></td>
     <td bgcolor="grey">Header1</td>
     <td bgcolor="grey">Header2</td>
     <td bgcolor="grey">Header3</td>
     <td bgcolor="grey">Header4</td>
     <td bgcolor="grey">Header5</td>
     </tr>

<tr>
     <td bgcolor="grey">Row1</td> 
     <td>
        <table>
        <tr>
        <td>
           Cell1  
        </td>
        </tr>
        <tr> 
        <td class='innerCell'>
        Inner cell1
        </td>
        </tr>
      </table> 
  </td> 
     <td>
        <table>
        <tr>
        <td>
           Cell1  
        </td>
        </tr>
        <tr> 
        <td class='innerCell'>
        Inner cell1
        </td>
        </tr>
      </table> 
  </td> 
     <td>
        <table>
        <tr>
        <td>
           Cell1  
        </td>
        </tr>
        <tr> 
        <td class='innerCell'>
        Inner cell1
        </td>
        </tr>
      </table> 
  </td> 
     <td>
        <table>
        <tr>
        <td>
           Cell1  
        </td>
        </tr>
        <tr> 
        <td class='innerCell'>
        Inner cell1
        </td>
        </tr>
      </table> 
  </td> 
     <td>
        <table>
        <tr>
        <td>
           Cell1  
        </td>
        </tr>
        <tr> 
        <td class='innerCell'>
        Inner cell1
        </td>
        </tr>
      </table> 
  </td> 
  </tr>

     <tr>
     <td bgcolor="grey">Row2</td> 
     <td>
        <table>
        <tr>
        <td>
           Cell2  
        </td>
        </tr>
        <tr> 
        <td class='innerCell'>
        Inner cell2
        </td>
        </tr>
      </table> 
  </td> 
     <td>
        <table>
        <tr>
        <td>
           Cell2  
        </td>
        </tr>
        <tr> 
        <td class='innerCell'>
        Inner cell2
        </td>
        </tr>
      </table> 
  </td> 
     <td>
        <table>
        <tr>
        <td>
           Cell2  
        </td>
        </tr>
        <tr> 
        <td class='innerCell'>
        Inner cell2
        </td>
        </tr>
      </table> 
  </td> 
     <td>
        <table>
        <tr>
        <td>
           Cell2  
        </td>
        </tr>
        <tr> 
        <td class='innerCell'>
        Inner cell2
        </td>
        </tr>
      </table> 
  </td> 
     <td>
        <table>
        <tr>
        <td>
           Cell2  
        </td>
        </tr>
        <tr> 
        <td class='innerCell'>
        Inner cell2
        </td>
        </tr>
      </table> 
  </td> 
  </tr>


     <tr>
     <td bgcolor="grey">Row3</td> 
     <td>
        <table>
        <tr>
        <td>
           Cell3  
        </td>
        </tr>
        <tr> 
        <td class='innerCell'>
        Inner cell3
        </td>
        </tr>
      </table> 
  </td> 
     <td>
        <table>
        <tr>
        <td>
           Cell3  
        </td>
        </tr>
        <tr> 
        <td class='innerCell'>
        Inner cell3
        </td>
        </tr>
      </table> 
  </td> 
     <td>
        <table>
        <tr>
        <td>
           Cell3  
        </td>
        </tr>
        <tr> 
        <td class='innerCell'>
        Inner cell3
        </td>
        </tr>
      </table> 
  </td> 
     <td>
        <table>
        <tr>
        <td>
           Cell3  
        </td>
        </tr>
        <tr> 
        <td class='innerCell'>
        Inner cell3
        </td>
        </tr>
      </table> 
  </td> 
     <td>
        <table>
        <tr>
        <td>
           Cell3  
        </td>
        </tr>
        <tr> 
        <td class='innerCell'>
        Inner cell3
        </td>
        </tr>
      </table> 
  </td> 
  </tr>
  </table>