Как выделить ячейки в двух разных таблицах, которые имеют одинаковые данные при наведении?

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>