如何在两个不同表格的同一行上应用悬停?

How to apply hover on the same row on two different tables?

我的 html 中有两个不同的表,假设它们都具有相同的数据 collection - 这意味着 collection 中的行代表相同的 object =].我想应用以下功能:当我将鼠标悬停在 Table 1 中的第 N 行时,它会突出显示 Table 1 中的第 N 行和 Table 2 中的同一行。我能够为了完成它,但是我不得不操纵我的 collection - 我在 object 上添加了 .hover 属性,并将其视为鼠标进入和鼠标离开时的标志,并添加了特定样式根据。但是,我知道不应该这样做——因为它打破了双向数据绑定规则。

关于如何在不操纵我的数据的情况下实现这一目标的任何想法?

您可以通过使用少量 jQuery:

来实现
var tr_class;
$('.table1 tr').hover(
  function(){
    tr_class = $('this').attr('class');
    $('this').addClass('highlightBg');
    $('.table2 ' + tr_class).addClass('highlightBg');
}, 
  function(){
   $(this).removeClass('highlightBg');
   $('table2 ' + tr_class).removeClass('highlightBg');
});
$('.table2 tr').hover(
  function(){
    tr_class = $('this').attr('class');
    $('this').addClass('highlightBg');
    $('.table1 ' + tr_class).addClass('highlightBg');
}, 
  function(){
   $(this).removeClass('highlightBg');
   $('table1 ' + tr_class).removeClass('highlightBg');
});

你的 table 行都需要有一个 class 像行号一样,例如计算它们:

<tr class='1'>...</tr>
<tr class='2'>...</tr>

.highlightBg 定义高亮状态的背景颜色,在本例中 .table1 和 .table2 是 tables 的 classes .

认为应该完成工作。

这是你的意思吗want.but我用了位jquery和this.hope这对你有帮助。

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

 <style type="text/css">

div.tableone{
  margin:50px;
}
div.tabletwo{
  margin: 50px;
}

table{
  border:1px solid black;
}

  table tr th{
    width: 200px;
  }

  table tr td{
    text-align: center;
  }

.classOne{
  background-color: orange;
  color: white;
}


 </style>

   




<body>
 
 <h1>table one</h1>
  <div class="tableone">
    <table border="2">
      <thead>
        <tr class="trone">
          <th>one</th>
          <th>Two</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>dataone</td>
          <td>datetwo</td>
        </tr>
      </tbody>
    </table>
  </div>

<h1>table two</h1>
  <div class="tabletwo">
    <table border="2">
      <thead>
        <tr class="trtwo">
          <th>Three</th>
          <th>Four</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>datatwo</td>
          <td>datethree</td>
        </tr>
      </tbody>
    </table>
  </div>
 
  <script type="text/javascript">
    $(document).ready(function(){
      $(".trone").mouseenter(function(){
        $(this).addClass("classOne");
        $(".trtwo").addClass("classOne");
      });
       $(".trone").mouseleave(function(){
        $(this).removeClass("classOne");
        $(".trtwo").removeClass("classOne");
      });


      $(".trtwo").mouseenter(function(){
        $(this).addClass("classOne");
        $(".trone").addClass("classOne");
      });

      $(".trtwo").mouseleave(function(){
        $(this).removeClass("classOne");
        $(".trone").removeClass("classOne");
      });


      
    });
  </script>

</body>
</html>

不使用 jQuery 的问题解决方案如下:

const table1 = document.getElementsByClassName("table-one")[0];
const table2 = document.getElementsByClassName("table-two")[0];

const table1Rows = table1.querySelectorAll("tr:not(.table-header)");
const table2Rows = table2.querySelectorAll("tr:not(.table-header)");

for (let i = 0; i < table1Rows.length; i++) {
  const table1Row = table1Rows[i];
  const table2Row = table2Rows[i];
  table1Row.addEventListener("mouseover", function(e) {
    table1Row.classList.add("hover-class");
    table2Row.classList.add("hover-class");
  });
  table1Row.addEventListener("mouseleave", function(e) {
    table1Row.classList.remove("hover-class");
    table2Row.classList.remove("hover-class");
  });
  table2Row.addEventListener("mouseover", function(e) {
    table1Row.classList.add("hover-class");
    table2Row.classList.add("hover-class");
  });
  table2Row.addEventListener("mouseleave", function(e) {
    table1Row.classList.remove("hover-class");
    table2Row.classList.remove("hover-class");
  });
}

在这里您可以看到实际的解决方案:JSFiddle