Javascript 如何在悬停时突出显示两个不同表上具有相同数据的单元格？

因此，我有两个不同的HTML表，它们的值可能相同，也可能不同。我在寻找一种方法来高亮显示表中具有相同值的单个单元格。例如，在下表中，当鼠标悬停在第一个表中的1上时，它将高亮显示此单元格以及表2中包含1的所有单元格

我能够用一些简单的CSS突出显示不受约束的单元格，但不知道如何突出显示不同表上相应的单元格

<table id="table1" border=1>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>1</td>
    <td>5</td>
  </tr>
  <tr>
    <td>6</td>
    <td>7</td>
    <td>1</td>
    <td>9</td>
    <td>10</td>
  </td>
</table>

..........

<table id="table2" border=1>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>1</td>
  </tr>
  <tr>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>1</td>
  </td>
</table>

1.
2.
3.
1.
5.
6.
7.
1.
9
10
..........
1.
2.
3.
4.
1.
6.
7.
8.
9
1.

给出的答案适用于这个示例代码，但是我希望使用如下用户输入的表来实现它

<script type="text/javascript">

function generateTable()
{
    var rows1 = document.getElementById('rows1').value;
    var columns1 = document.getElementById('columns1').value;
    var tableBegin = '<table border="1">\n';
    var body = '';

    for(var i=0; i < rows1; i++)
    {
        body += '<tr>';
        for(var j=0; j < columns1; j++)
        {
            body += '<td>';
            body += Math.floor(Math.random()*11);
            body += '</td>'
        }
        body += '</tr>\n';
    }
    var endTable = '</table>';
document.getElementById('firstTable').innerHTML = tableBegin + body + endTable;
}


function generateTable2()
{
    var rows2 = document.getElementById('rows2').value;
    var columns2 = document.getElementById('columns2').value;
    var tableBegin2 = '<table border="1">\n';
    var body2 = '';

    for(var i=0; i < rows2; i++)
    {
        body2 += '<tr>';
        for(var j=0; j < columns2; j++)
        {
            body2 += '<td>';
            body2 += Math.floor(Math.random()*11);
            body2 += '</td>'
        }
        body2 += '</tr>\n';
    }
    var endTable2 = '</table>';
document.getElementById('secondTable').innerHTML = tableBegin2 + body2 + endTable2;
}
</script>    
<form name="makeTable1">
 Table 1<br>
   Rows:    <input type="text" name="rows1" id="rows1"><br>
   Columns: <input type="text" name="columns1" id="columns1"><br><br>

<input name="generate" type="button" value="Generate Table" onclick='generateTable();'/>
</form>


   Table 2<br>
   Rows:    <input type="text" name="rows2" id="rows2"><br>
   Columns: <input type="text" name="columns2" id="columns2"><br>

<form name="makeTable2">

<input name="generate" type="button" value="Generate Table" onclick='generateTable2();'/>
</form>

 <div id="firstTable"></div>

函数generateTable（）
{
var rows1=document.getElementById（'rows1'）。值；
var columns1=document.getElementById（'columns1'）。值；
var tableBegin='\n'；
变量体=“”；
对于（变量i=0；i
行：

列：


表2

行：

列：

---

如何修改要在这些表上实现的答案？

您可以尝试类似的方法（假设您可以接受JQuery）：

$（（）=>{//我们需要在dom就绪后附加侦听器
$（'td'）。on（'mouseover'，（e）=>{//将td-s上的处理程序附加到'hover'等效事件
让=$（e.currentTarget）.text（）//获取当前元素文本
$（（“td”）.filter（（，x）=>$（x）.text（）==the.addClass（'hover'）//查找所有具有匹配内容的td-s并添加标记类
})
$（'td'）。在（'mouseout'，（）=>{//attach focus lost on td-s上
$（`td`）.removeClass（'hover'）//从所有td-s中删除标记类
})
})

。悬停{
背景色：红色；
}

1.
2.
3.
1.
5.
6.
7.
1.
9
10
..........
1.
2.
3.
4.
1.
6.
7.
8.
9
1.

onmouseover

-

onmouseout

事件可以帮助您解决问题。但是，使用一些行-列数据标记单元格可能会很有用，例如

data rc=“1-2”

…@ZorgoZ您说的是js而不是CSP，请在codepen或codesandbox中添加代码以帮助您thanks@Abal请不要要求代码被张贴到第三方网站，因为这些链接可能会随着时间的推移而消失。可以在堆栈溢出问题中插入可运行代码。好的，把代码放在这里，我们可以看到在操作中这有点帮助，但我想更多的是基于值，而不是表上的位置。因此，如果第一个1在第一个表中悬停，那么第二个表中的所有1也会高亮显示问题没有用JQuery标记。此外，好的答案不仅仅是“试试这个”后面跟着一些代码。他们解释了问题和解决方案。亲爱的@ScottMarcus你完全正确。但是，在OP确认这是他期望的结果后，这两种情况都能令人满意。完美，这正是我想要的！谢谢一群人@在这种情况下，请用JQuery标记您的问题。