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

Question

我正在 PHP 中动态创建两个 table，我希望能够轻松地比较两个 table 中的行。我希望能够悬停突出显示 table 中的一行和另一个 table 突出显示中的相应行（按 id）。

我在这里发现了很多类似情况的参考资料，但它们似乎都通过将鼠标悬停在第 1 行上来工作，将突出显示 table 中的第 1 行。我希望突出显示按行 ID (或 class，不确定哪个更合适）。

在下面的示例中，如果我将鼠标悬停在 table 1 中的行 ID 123 上，table 2 中的行 ID 123 也会突出显示。反之，突出显示 table 2 中的行 ID 123 将突出显示 table 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。在这一点上完全失去了。在这一点上，我无法尝试将其他解决方案组合在一起工作。

Answer 1

对于初学者来说，ID 应该是唯一的 - 因此您无法匹配这些 ID。将它们替换为 class 或数据属性，例如

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

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

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

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

Answer 2

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>

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

Highlight 2 rows by class or ID in separate tables

javascript

css

jquery

rows

highlight