我正在用 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>
关于javascript - 在单独的表格中按类别或 ID 突出显示 2 行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38186545/