使用表格中选定的单元格值选择另一个表格中具有相同值的单元格

Question

我有两张表，都有相同数量的条目和相同的值，但是这些值出现在不同的点。一个例子是

表 1

1. 约翰
2. 莎拉
3. 克里斯

表2

1. 克里斯
2. 莎拉
3. 约翰

我希望用户点击第一张桌子上的 John 他的位置 在表 1 和表 2 中突出显示

.

我已经实现了高亮功能来处理表一，我只需要一种方法来读取单元格值，然后在表 2 中搜索其行 ID 以突出显示它。

下面我将展示我的表格代码以及高亮功能。

（我知道我输出的表格可能没有达到应有的最佳状态，我希望得到一些帮助，但我还没有优化它的旧代码）

表 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 是表 id，通过另一个函数传入，必须调用该函数才能使两个表出现

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>