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

我有一张不同大小的桌子。我试着做一些事情，比如如果我将一个单元格悬停，只有一行中的前一个单元格会高亮显示

从示例中，您将看到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>

---

[很抱歉我的英语不好]

您可以定义一个类，当一个类像这样悬停时，该类将应用于所有以前的表单元格：

jQuery

$('.table-style td').hover(
    function(){
        $(this).prevAll().addClass('hover');
    }, 
    function(){     
        $(this).prevAll().removeClass('hover');
    }
);

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

.hover{font-weight: bold} /* or whatever  the "highlighting needs to be */

---

我修改了你的小提琴，使它现在可以在这里使用：

您的表格单元格以一种奇怪的方式组织，很难弄清楚家长是谁，因此我不得不使用以下方法手动绘制家长结构：

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

---

我已经更新了FIDDLE：这几乎只是一个问题，比如：当我将鼠标悬停在项目j上时，它不会像项目3那样突出显示行上的前一个单元格。将鼠标悬停在项目j上，还应突出显示项目a、项目B这是我想要的结果。问题是，我必须使用rowspan来创建表，以满足需求。