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

Question

我正在用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。 在这一点上完全丧失。 在这一点上，试图将其他解决方案结合在一起工作是无法实现的。

Answer 1

对于初学者来说，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/

请原谅代码的草率性质，但应该足以使您在正确的位置查找。

Answer 2

不能在单个HTML文档中重复Id 。 因此，修改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>