Use selected cell value from table to select a cell in another table with the same value

Question

I have two tables, both have the same number of entries and the same values however the values occur at different points. An example would be

Table 1

1. John
2. Sarah
3. Chris

Table2

1. Chris
2. Sarah
3. John

I would like users when they click on John on table one his position is highlighted in table one as well as table 2

.

I have already implemented the highlight function to work with table one, I just need a way to read the cell value then search its row id in table 2 to highlight that.

Below I will show my table code as well as the highlight function.

(I understand I may not be outputting the tables as optimal as I should be, I would love some assistance with that, but its old code that I have not optimized yet)

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

Table 2 is the same but the id = laliga2

Code to highlight (note y is the table id and is passed in through another function that must be called to make the two tables appear

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

I figured it out here is the 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>