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

Question

我正在开发一个应用程序，该应用程序上有 2 个表 左侧和右侧2行，在 table 上时 用户选择任意数字，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");
            }); 
        });