根据特定事件在 HTML 表上使用 Javascript 动态更改 CSS

Question

我正在开发一个有 2 个表的应用程序 左侧和右侧2行，在桌子上时 用户选择任意数字，td 值是动态的 添加到右侧的行中。

这按预期工作，但我正在尝试使用 JS 添加一个功能，如果用户 悬停在行上的任何输入上（在右侧） 它变为绿色和所有相应的值/ td 表格（左侧）其值与用户悬停的行匹配背景颜色立即变为绿色。

例如，如果用户将鼠标悬停在右侧的任何输入行上，该行具有以下值：7, 9, 4, 3, 5 特定的输入背景颜色字段应更改为绿色（适用于我的代码） 到左侧表格上的相应 td 值（7、9、4、3、5），其值 与特定输入的行匹配用户将鼠标悬停在上并将背景颜色更改为绿色

这是我的尝试：

标记代码

<!--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");
            }); 
        });