Динамическое изменение CSS с использованием Javascript в таблице HTML в зависимости от конкретного события

Question

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

Это работает, как и ожидалось, но я пытаюсь добавить функциональность, используя JS, посредством чего, если пользователь наводит указатель мыши на любом входе в строке (справа), он меняется на зеленый и все соответствующие значения / td в таблице (левая сторона) , значения которых совпадают со строкой, на которую пользователь наложил , цвет фона сразу меняется на зеленый.

Например, еслипользователь наводит на любой вход справа строку со следующими значениями: 7, 9, 4, 3, 5 конкретное поле цвета фона ввода должно измениться на зеленый (что работает в моем коде) к соответствующим значениям td (7, 9, 4, 3, 5) в таблице с левой стороны, значения которой совпадают со строкой определенного ввода, на которую пользователь навесил , и изменяют фонnd цвет к зеленому

Вот моя попытка:

Код разметки

<!--Table on the left -->
<div style="width: 140px; float: left;">
    <table id="table1">
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <td>7</td>
                <td>8</td>
            </tr>
            <tr>
                <td>9</td>
                <td>10</td>
            </tr>
        </tbody>
    </table>
</div>
<!-- Rows on the right-->


<!--2nd table-->
<div style="width: 140px; float: left; margin-left: 12px;">
        <table id="table2">
            <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>6</td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>8</td>
                </tr>
                <tr>
                    <td>9</td>
                    <td>10</td>
                </tr>
            </tbody>
        </table>
    </div>
    <!-- Rows on the right-->

<!-- Make sure each input has a unique id-->
<div style="width: 600px; float: right;">
    <div id="selection1">
        <input type="text" name="1" size="4" id="inp1" value="">
        <input type="text" name="2" size="4" id="inp2"  value="">
        <input type="text" name="3" size="4" id="inp3"  value="">
        <input type="text" name="4" size="4" id="inp4"  value="">
        <input type="text" name="5" size="4" id="inp5"  value="">  +
        <input style="margin-left: 20px;" type="text" name="6" size="4" id="bonus1"  value="">        
    </div>

    <div style="margin-top: 5px;" >
        <input type="text" size="4" id="inp7" value="">
        <input type="text"   size="4" id="inp8"  value="">
        <input type="text"  size="4" id="inp9"  value="">
        <input type="text"  size="4" id="inp10"  value="">
        <input type="text"  size="4" id="inp11"  value="">  +
        <input style="margin-left: 20px;" type="text"  size="4" id="bonus2"  value="">        
    </div>
</div>

Код Javascript

<script>
        // window.onload = function () { alert("Js working!") };

        let currentInput = 1; 
        let bonusInput = 1;

        $("#table1 td").on('click',function(event){
            //gets the number associated with the click
            let num = $(this).text(); 
            //set it to input's value attribute
            $("#inp" + currentInput++).attr("value",num); 
        });

        //Bonus input
        $("#table2").on('click',function(event){
            let bon = event.target.textContent;
            $("#bonus" + bonusInput++).attr("value",bon);
        });

        $("input").hover( function(event) {
            let num = $(this).attr("value");
            if (num) {
                //Change input color on hover
                $(this).css("backgroundColor","green");
                //Change tables specific input bgcolor on hover
                $("#table1 td").each(function() {
                    if ($(this).text() === num) $(this).css("backgroundColor","green");
                });
                $("#table2 td").each(function() {
                    if ($(this).text() === num) $(this).css("backgroundColor","green");
                });
            }   
            }, 
            function(event) {
                //Change input color on hover out
                $(this).css("backgroundColor","white");
                //Change specific table bgcolor on hover out
                $("#table1 td").each(function() {
                    $(this).css("backgroundColor","orange");
                });
                $("#table2 td").each(function() {
                    $(this).css("backgroundColor","orange");
                });   
            });
    </script>

---

Answer 1

Может быть, вам нужен этот код:

    let currentInput = 1; 
    let bonusInput = 1;

    $("#table1 td").on('click',function(event){
        //gets the number associated with the click
        let num = $(this).text(); 
        //set it to input's value attribute
        $("#inp" + currentInput++).attr("value",num); 
    });

    //Bonus input
    $("#table2").on('click',function(event){
        let bon = event.target.textContent;
        $("#bonus" + bonusInput++).attr("value",bon);
    });

    $("input").hover( function(event) {
        //alert($('#selection1 input').serialize());
        //let num = $(this).attr("value");
        let parent = $(this).parent();
        $(parent.children()).each(function (index, element) {
        let num = $(element).val();
          if (num) {
              //Change input color on hover
              $(this).css("backgroundColor","green");
              //Change tables bgcolor on hover
              $("#table1 td").each(function() {
                  if ($(this).text() === num) $(this).css("backgroundColor","green");
              });
              $("#table2 td").each(function() {
                  if ($(this).text() === num) $(this).css("backgroundColor","green");
              });
          }
        });
        }, 
        function(event) {
            //Change input color on hover out
             let parent = $(this).parent();
                 $(parent.children()).each(function (index, element) {

            $(element).css("backgroundColor","white");
            });
            //Change tables bgcolor on hover out
            $("#table1 td").each(function() {
                $(this).css("backgroundColor","orange");
            }); 
        });