在表中选择td的值，然后使用Javascript填充其他位置

Question

我正在一个应用程序中工作，在该应用程序中我在表中有一些值，当用户单击表上的任何数字时，捕获所选数字并在右侧两行的单个输入字段中填充时会遇到问题侧面

标记代码

 <!--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-->
    <div style="float: right;" >
        <input type="text" id="inp1" value="">
        <input type="text"   id="inp2"  value="">
        <input type="text"  id="inp3"  value="">
        <input type="text"  id="inp4"  value="">
        <input type="text"  id="inp5"  value="">
        <input type="text"  id="inp6"  value="">        
    </div>

    <div style="float: right;  margin-top: 5px;" >
        <input type="text" id="inp1" value="">
        <input type="text"   id="inp2"  value="">
        <input type="text"  id="inp3"  value="">
        <input type="text"  id="inp4"  value="">
        <input type="text"  id="inp5"  value="">
        <input type="text"  id="inp6"  value="">        
    </div>

JavaScript代码

// code to read selected table row cell data (values).
        $("#table1").on('click',function(){
            var data = $('tr td');
            alert(data);
        });

Answer 1

使用此代码（每个td处理一次）

https://jsfiddle.net/xb5140po/

// code to read selected table row cell data (values).
        $("td").on('click',function(){

            alert(this.innerHTML);
        });

Answer 2

$("#table1 td").on('click',function(){
   console.log($(this).text());
});

Answer 3

这是您要找的吗？

首先，我们用唯一的Ids命名所有输入（请注意，您不能有重复的Ids，所以我从inp7开始重命名了第二行ID。

然后，只需捕获点击事件目标元素的编号，然后将其放置在输入value属性中即可。

// code to read selected table row cell data (values).
let currentInput = 1; //first input

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

$("input").hover( function(event) {
    let num = $(this).attr("value");
    if (num) {
         $(this).css("backgroundColor","green");
         $("#table1 td").each(function() {
             if ($(this).text() === num) $(this).css("backgroundColor","green");
         });
    }   
}, function(event) {
    $(this).css("backgroundColor","white");
          $("#table1 td").each(function() {
 $(this).css("backgroundColor","white");
         });   
});

td {
   border: solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--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-->
    <div style="float: right;" >
        <input type="text" id="inp1" value="">
        <input type="text"   id="inp2"  value="">
        <input type="text"  id="inp3"  value="">
        <input type="text"  id="inp4"  value="">
        <input type="text"  id="inp5"  value="">
        <input type="text"  id="inp6"  value="">        
    </div>

    <div style="float: right;  margin-top: 5px;" >
        <input type="text" id="inp7" value="">
        <input type="text"   id="inp8"  value="">
        <input type="text"  id="inp9"  value="">
        <input type="text"  id="inp10"  value="">
        <input type="text"  id="inp11"  value="">
        <input type="text"  id="inp12"  value="">        
    </div>