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

Question

所以我有两个不同的 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>

给定的答案适用于此示例代码，但我希望使用用户输入的表格来实现它，如下所示

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

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

Answer 1

你可以尝试这样的事情(假设 JQuery 对你来说是可以接受的):

$(() => { // we need to attach listeners after the dom is ready
  $('td').on('mouseover', (e)=> { // attach handler on TD-s to 'hover' equivalent event
    let the = $(e.currentTarget).text() // get current element text
    $("td").filter((_,x) => $(x).text() == the).addClass('hover') // find all TD-s with matching content and add marker class
  })
  
  $('td').on('mouseout', ()=> { // attach focus lost on TD-s 
    $(`td`).removeClass('hover') // remove marker class from all TD-s
  })
})

.hover {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<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>
  </tr>
</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>
  </tr>
</table>