在单独的表中按类或ID突出显示2行

Highlight 2 rows by class or ID in separate tables

本文关键字：ID 显示 2行 单独      更新时间：2023-09-26

我在PHP中动态创建两个表，我希望能够轻松地比较两个表中的行。我希望能够悬停突出显示任一表中的一行，并在另一个表中突出显示相应的行(按id)。

我在这里发现了许多类似情况的参考，但它们似乎都可以通过悬停在第1行上来突出显示表2中的第1行。我希望突出显示按行ID(或类，不确定哪个更合适)。

在下面的示例中，如果我将鼠标悬停在表1中的行id 123上，表2中的行id 123也会高亮显示。反之，在表2中突出显示行id 123将突出显示表1中的行id 123。

这里的技巧是这些行可以是任何一种顺序，所以计数或做n的东西在这里不起作用。

<table id="t1">
    <tr id="123"><td>......</td></tr>
    <tr id="456"><td>......</td></tr>
    <tr id="789"><td>......</td></tr>
    <tr id="0AB"><td>......</td></tr>
    <tr id="CDE"><td>......</td></tr>
</table>
<p>Table 2</p>
<table id="t2">
    <tr id="CDE"><td>......</td></tr>
    <tr id="123"><td>......</td></tr>
    <tr id="0AB"><td>......</td></tr>
    <tr id="456"><td>......</td></tr>
    <tr id="789"><td>......</td></tr>
</table>

我对Javascript和jQuery一窍不通。在这一点上，我完全不知所措。在这一点上，试图将其他解决方案结合起来工作超出了我的能力范围。

Id不能在单个HTML文档中重复。因此修改你的HTML使用class而不是id。然后，您可以参考以下代码的逻辑:

$(document).ready(function() {
  $("table tr").hover(function() {
      $("tr").removeClass("highlight");
      $("." + $(this).attr("class")).addClass("highlight");
    },
    function() {
      $("." + ($(this).attr("class").split(' '))[0]).removeClass("highlight");
    });
});
.highlight {
  background: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="t1">
  <tr class="123">
    <td>......</td>
  </tr>
  <tr class="456">
    <td>......</td>
  </tr>
  <tr class="789">
    <td>......</td>
  </tr>
  <tr class="0AB">
    <td>......</td>
  </tr>
  <tr class="CDE">
    <td>......</td>
  </tr>
</table>
<p>Table 2</p>
<table id="t2">
  <tr class="CDE">
    <td>......</td>
  </tr>
  <tr class="123">
    <td>......</td>
  </tr>
  <tr class="0AB">
    <td>......</td>
  </tr>
  <tr class="456">
    <td>......</td>
  </tr>
  <tr class="789">
    <td>......</td>
  </tr>
</table>

对于初学者来说，ID应该是唯一的——这样你就不可能匹配到那些了。将它们替换为类或数据属性，例如

<table>
    <tr data-set="123"><td>...</td></tr>
    <tr data-set="abc"><td>...</td></tr>
    <tr data-set="xyz"><td>...</td></tr>
    <tr data-set="987"><td>...</td></tr>
</table>
<table>
    <tr data-set="123"><td>...</td></tr>
    <tr data-set="abc"><td>...</td></tr>
    <tr data-set="xyz"><td>...</td></tr>
    <tr data-set="987"><td>...</td></tr>
</table>

然后像这样，你基本上得到你悬停的元素的data属性，然后搜索其他具有相同data属性的元素

https://jsfiddle.net/yqm0z5up/1/

请原谅代码的草率性质，但应该足以让您在正确的地方查找。

相关文章：