javascript - 同时悬停 2 个表格单元格，在两个方向上彼此相隔 4 个字段

Question

我的表是这样的:

我写了一点 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>

我已经读到有 no "previous sibling" selector in CSS所以我正在寻找不同的解决方案。如果纯 CSS 无法完成工作，JavaScript 解决方案也不错。

Answer 1

这是一个只有 javascript 的解决方案。您可以使用类和 classList，然后使用 add 和 remove 函数。使用 jQuery，这可以进一步简化。在这里我假设它总是第 4 列是相似的。为了使其更通用，您可以相应地调整代码..

仅限 JavaScript 的解决方案

window.onload = function() {
  tdElems = document.getElementsByTagName('td')
  tdElems = Array.prototype.slice.call(tdElems);

  tdElems.forEach((elem) => {
    elem.addEventListener('mouseleave', function($event) {
      tdElems.forEach((td) => {
        td.style.background = 'white';
      })
    });
    elem.addEventListener('mouseover', function($event) {
      showHover($event.target);
    });
  })
}



function showHover(elem) {
  parent = elem.parentElement;
  for (i = 0; i < parent.children.length; i++) {
    if (parent.children[i] === elem) {
      elem.style.background = 'lightgray';
      if (parent.children[i + 4]) {
        parent.children[i + 4].style.background = 'lightgray';
      } else if (parent.children[i - 4]) {
        parent.children[i - 4].style.background = 'lightgray';
      }
      break;
    }

  }
}

<table>
  <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>
    <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>
</table>

jQuery 解决方案

$(document).ready(function() {
  $('td').hover(function($event) {
    $('td').removeClass('hovered');
    $(this).addClass('hovered');
    const parent = this.parentElement;
    var index = Array.from(parent.children).indexOf(this);
    if (parent.children[index + 4]) {
      $(parent.children[index + 4]).addClass('hovered');
    } else if (parent.children[index - 4]) {
      $(parent.children[index - 4]).addClass('hovered');
    }

  }, function() {
    $('td').removeClass('hovered');
  });

})

.hovered {
  background: lightgray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <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>
    <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>
</table>

希望这有帮助:)