Выбор значения td в таблице и заполнение в другом месте с использованием Javascript

Question

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

Код разметки

 <!--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

используйте это (обработчик для каждого тд)

https://jsfiddle.net/xb5140po/

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

            alert(this.innerHTML);
        });

Answer 2

Это то, что вы ищете?

Сначала мы называем все входные данные уникальными Ids (обратите внимание, что вы не можете иметь дубликат Ids, поэтому я переименовал идентификаторы второй строки с inp7 и далее.

Тогда нужно захватить номер целевого элемента события щелчка и поместить его в атрибут ввода 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>

Answer 3

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