Question

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

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

Answer 1

你可以通过使用小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');
});

两个表行都需要一个类似行号的类，例如计算它们：

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

.highlightBg为突出显示的状态定义背景颜色，在此示例中.table1和.table2是表的类。

认为应该做的工作。

Answer 2

这就是你想要的。但是我使用bit 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>

Answer 3

不使用 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

如何将哈希应用于两个不同表上的同一行？

3 个答案: