Используйте значение выбранной ячейки из таблицы, чтобы выбрать ячейку в другой таблице с тем же значением

Question

У меня есть две таблицы, обе имеют одинаковое количество записей и одинаковые значения, однако значения встречаются в разных точках. Примером может быть

Таблица 1

1. Джон
2. Сара
3. Крис

Таблица2

1. Крис
2. Сара
3. Джон

Я хотел бы, чтобы пользователи нажимали на Джона на столе один, его позиция выделялась в таблице один, а также таблица 2

.

Я уже реализовал функцию подсветки для работы с таблицей один, мне просто нужен способ прочитать значение ячейки, а затем искать ее идентификатор строки в таблице 2, чтобы выделить это.

Ниже я покажу код своей таблицы, а также функцию выделения.

(я понимаю, что я могу выводить таблицы не так оптимально, как следовало бы, Я хотел бы помочь с этим, но его старый код, который я еще не оптимизировал)

Таблица 1

<div class='column'>
    <h3>".$_SESSION['username']."</h3>
        <h5>Total Score: ".$data1['laligascore']."</h5>
    <table id='laliga' class='table table-bordered'>
        <tr>
            <th>#</th>
            <th>Name</th>
        </tr>
        <tbody class='row_position'>"?>

<?php
        require('config.php');
        $mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE2);
        $tablename = $_SESSION['username'] . "_laliga";
        $sql = "SELECT * FROM $tablename ORDER BY position_order";
        $users = $mysqli->query($sql);
        while($user = $users->fetch_assoc()){
        ?>
            <tr  id="<?php echo $user['id'] ?>">
                <td><?php echo $user['position_order'] ?></td>
                <td><?php echo $user['title'] ?></td>
            </tr>
        <?php }?>
        </tbody>
    </table>
    </div>

Таблица 2 такая же, но id = laliga2

Код для выделения (обратите внимание, y - это идентификатор таблицы и передается через другую функцию, которая должна быть вызвана для создания двух таблиц появляются

function highlight_row(y) {
var table = document.getElementById(y);
var table2 = document.getElementById(y.concat("2"));
var cells = table.getElementsByTagName('td');
var cells2 = table2.getElementsByTagName('td');

for (var i = 0; i < cells.length; i++) {
    var cell = cells[i];
    cell.onclick = function () {
        var rowId = this.parentNode.rowIndex;

        var rowsNotSelected = table.getElementsByTagName('tr');
        for (var row = 0; row < rowsNotSelected.length; row++) {
            rowsNotSelected[row].style.backgroundColor = "";
        }
        var rowSelected = table.getElementsByTagName('tr')[rowId];
        rowSelected.style.backgroundColor = "yellow";

        msg = this.innerHTML;

        /*var tableRow = $("td").filter(function() {
            return $(this).text() == msg;
            }).closest("tr"); */



        }
}

Answer 1

Я понял это здесь javascript

    <script type="text/javascript">
function myFunction(y) {
    var x = document.getElementById(y);
    table2name = y.concat('2');
    var x2 = document.getElementById(table2name);
    if (x.style.display === "none" && x2.style.display === "none") {
        x.style.display = "flex";
        x2.style.display = "flex";
        highlight_row(y);
        highlight_row(table2name);
    } else {
        x.style.display = "none";
        x2.style.display = "none";
    }

}
function highlight_row(y) {
    var table = document.getElementById(y);
    var cells = table.getElementsByTagName('td');

    for (var i = 0; i < cells.length; i++) {
        var cell = cells[i];
        cell.onclick = function () {
            var rowId = this.parentNode.rowIndex;

            var rowsNotSelected = table.getElementsByTagName('tr');
            for (var row = 0; row < rowsNotSelected.length; row++) {
                rowsNotSelected[row].style.backgroundColor = "";
            }
            var rowSelected = table.getElementsByTagName('tr')[rowId];
            rowSelected.style.backgroundColor = "yellow";

            highlight_other(y,this.innerHTML);




            }
    }

}

function highlight_other(tablename,element) {
    var othertable = "";
    if(tablename.substring(tablename.length-1) == "2"){
        othertable = tablename.substring(0, tablename.length-1);
    }
    else{
        othertable = tablename.concat('2');
    }

    var table2 = document.getElementById(othertable);
    var cells2 = table2.getElementsByTagName('td');


    for (var i2 = 0; i2 < cells2.length; i2++) {
        var cell2 = cells2[i2];
        if(cell2.innerHTML === element) {

            var rowId2 = cell2.parentNode.rowIndex;

            var rowsNotSelected2 = table2.getElementsByTagName('tr');
            for (var row2 = 0; row2 < rowsNotSelected2.length; row2++) {
                rowsNotSelected2[row2].style.backgroundColor = "";
            }
            var rowSelected2 = table2.getElementsByTagName('tr')[rowId2];
            rowSelected2.style.backgroundColor = "red";

            }
    }

}

</script>