Question

Am正在处理一个应用程序，该应用程序上具有 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");
            }); 
        });

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

1 个答案: