javascript - 将鼠标悬停在一个表格单元格上将突出显示一行中的前一个单元格

Question

我有一个单元格大小不同的表格。我试图做一些事情，比如如果我将鼠标悬停在一个单元格上，只会突出显示一行中的前一个单元格。

JS FIddle

从示例中，您会看到 Item + Item a + item j 具有灰色背景，这说明我现在将鼠标悬停在单元格“item j”上并且之前的单元格也突出显示。

像这样，如果我将鼠标悬停在项目 b 上，它将突出显示项目 b、项目 a 和项目。如果我将鼠标悬停在第一个单元格项目上，它只会突出显示项目，因为没有上一个单元格。

对于第 1 项、第 2 项和第 3 项也是如此。

我不擅长 jQuery，因此我未能构建任何逻辑来创建它。

如果有人在这方面帮助我，那对我会有很大帮助。

HTML

<table class="table-style" width="100%" border="0" cellspacing="0" cellpadding="0" >
       <tr>
         <td class="active" rowspan="4"><p><a href="#">Item</a></p></td>
         <td ><p><a href="#">Item 1</a></p></td>
         <td ><p><a href="#">Item 2</a></p></td>
         <td ><p><a href="#">Item 3</a></p></td>
      </tr>
      <tr>
         <td class="active" rowspan="3"><p><a href="#">Items a</a></p></td>
         <td class="active" rowspan="3"><p><a href="#">Items b</a></p></td>
         <td ><p><a href="#">Items i</a></p></td>
      </tr>
      <tr>
        <td class="active"><p><a href="#">Items j</a></p></td>
      </tr>
      <tr>
        <td><p><a href="#">Items k</a></p></td>
      </tr>
  </table>

CSS

.table-style{
    margin-bottom:15px;
}

.table-style td{
    border-collapse: collapse;
    border: 1px solid #ddd;
    text-align: center;
    padding: 5px 0px;
}

.table-style td p {
    font-size: 13px;
    color: #454545;
    font-weight: normal;
}

.table-style td p a {
    color: #8d8d8d;
    text-decoration:none;
}

.table-style td.active{
    background: #ddd;
    border: solid 2px #C9C9C9;
}

.table-style td.active p a{
    color: #000;
    font-weight:bold;

}    

.table-style td p a:hover {
    color: #000;
    text-decoration:underline;
}

[抱歉我的英语不好]

Answer 1

我已经修改了你的 fiddle ，现在它可以在这里工作了:http://jsfiddle.net/BHVv6/4/

您的表格单元格以一种奇怪的方式组织，很难清楚地知道父级是谁，所以我不得不使用以下方法手动绘制父级结构:

parentMap = {
    "itemOrig": false,
    "item1": "itemOrig",
    "item2": "item1",
    "item3": "item2",
    "itemI": "itemB",
    "itemJ": "itemB",
    "itemK": "itemB",
    "itemB": "itemA",
    "itemA": "itemOrig"
};