Javascript 同时悬停2个表格单元格，4个字段在两个方向上彼此分开

我的桌子看起来是这样的：

我写了一些CSS，所以当我在15年抵押贷款列下的特定字段上悬停时，30年抵押贷款下的相应单元格也会悬停

td:hover, td:hover + td + td + td + td {
    background-color: grey;
}

当我选择一个15年期抵押贷款字段时，这种方法非常有效，但当我选择一个30年期抵押贷款字段时，这种方法就不行了。也就是说，它在另一个方向不起作用

表结构非常简单：

<thead>
    <tr>
        <th colSpan='1' />
        <th colSpan='4'>15 year</th>
        <th colSpan='4'>30 year</th>
    </tr>
    <tr>
        <th colSpan='1' />
        <th>Mortgage Payment</th>
        <th>Investment Payment</th>
        <th>Loan Amount</th>
        <th>Investment Amount</th>
        <th>Mortgage Payment</th>
        <th>Investment Payment</th>
        <th>Loan Amount</th>
        <th>Investment Amount</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Year x</td>
        <td>value</td>
        <td>value</td>
        <td>value</td>
        <td>value</td>
        <td>value</td>
        <td>value</td>
        <td>value</td>
        <td>value</td>
    </tr>
    ...
</tbody>

15年
30年
按揭付款
投资支付
贷款金额
投资额
按揭付款
投资支付
贷款金额
投资额
第十年
价值
价值
价值
价值
价值
价值
价值
价值
...

---

我已经读到有这样的问题，所以我正在寻找一个不同的解决方案。如果纯CSS无法完成任务，JavaScript解决方案也不错。

我认为最好的解决方案是为两个表添加类似的类。例如，您的

第4年

抵押付款

将为您的15年和30年表设置

第4年抵押

课程。然后，您可以使用一个简单的jQuery将一个

active

类添加到悬停的元素中，这些元素将具有您想要的css

$('td').hover(function(){
   // Remove the current active class
   $('td').removeClass('active');

   //Add class to desired td
   $('.'+$(this).attr('class')).addClass('active');
});

CSS:

---

这里是一个只使用javascript的解决方案。您可以使用类和

类列表

，然后使用

添加

和

删除

功能。使用jQuery，这可以简化得更多。在这里，我假设它总是第四列，这是相似的。为了使其更通用，您可以相应地调整代码

仅JavaScript解决方案

window.onload=function（）{
tdElems=document.getElementsByTagName（'td'）
tdElems=Array.prototype.slice.call（tdElems）；
tdElems.forEach（（elem）=>{
元素addEventListener（'mouseleave'，函数（$event）{
tdElems.forEach（（td）=>{
td.style.background='白色'；
})
});
元素addEventListener（'mouseover'，函数（$event）{
showHover（$event.target）；
});
})
}
功能显示悬停（elem）{
parent=elem.parentElement；
对于（i=0；i

15年
30年
按揭付款
投资支付
贷款金额
投资额
按揭付款
投资支付
贷款金额
投资额
第十年
价值
价值
价值
价值
价值
价值
价值
价值
第十年
价值
价值
价值
价值
价值
价值
价值
价值

最后我自己也创建了一个解决方案。该函数将在

tr

元素中启动

onMouseOver

，但我们也可以将其放在

tbody

中，或者放在表中的任何位置

const hoverTableCells = year => {
  // grab table cells depending on year
  const tableCells = Array.from(
    document.getElementsByTagName('tbody')[0].children[year].children
  )

  const hover = (color, cell, index) => {
    const nextCells = tableCells[index + 4]
    const prevCells = tableCells[index - 4]

    cell.style.backgroundColor = color

    if (typeof nextCells !== 'undefined') {
      nextCells.style.backgroundColor = color
    }
    if (typeof prevCells !== 'undefined') {
      prevCells.style.backgroundColor = color
    }
  }

  // iterate over all cells in row and set appropriate color depending on mouse event
  tableCells.forEach((cell, index) => {
    cell.addEventListener('mouseover', () => hover('grey', cell, index))
    cell.addEventListener('mouseleave', () => hover('white', cell, index))
  })
}

---

我还添加了逻辑，以确保未选择

Year

列，但这不是我原始问题的一部分，因此我不会将其包括在这个答案中。

您只想要css、html解决方案还是javascript解决方案也可以？javascript完全可以@Manish。我在这里等待响应时，实际上正在尝试一个javascript解决方案。我会在帖子中添加js标签。当然，它不会起作用，因为悬停是+4td（

td+td+td+td+td

），如果有45年期抵押贷款，而你选择30年期抵押贷款，它会悬停在那里。解决方案接近于使用-4td@jgozal酷。请看我的答案。我已经发布了两个解决方案，一个只使用javascript，另一个使用jQuery，这是最适合您的。。。

const hoverTableCells = year => {
  // grab table cells depending on year
  const tableCells = Array.from(
    document.getElementsByTagName('tbody')[0].children[year].children
  )

  const hover = (color, cell, index) => {
    const nextCells = tableCells[index + 4]
    const prevCells = tableCells[index - 4]

    cell.style.backgroundColor = color

    if (typeof nextCells !== 'undefined') {
      nextCells.style.backgroundColor = color
    }
    if (typeof prevCells !== 'undefined') {
      prevCells.style.backgroundColor = color
    }
  }

  // iterate over all cells in row and set appropriate color depending on mouse event
  tableCells.forEach((cell, index) => {
    cell.addEventListener('mouseover', () => hover('grey', cell, index))
    cell.addEventListener('mouseleave', () => hover('white', cell, index))
  })
}