Как объяснить кнопке расположение ячейки td?

[Artur_Hopf]

Добрый день. Есть таблица, по нажатию на строку нужно заполнить следующую ячейку. Сейчас заполняется так:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<table class="table table-bordered table-hover  testTable">
    <thead>
         <tr class="bg-info text-white">
               <td>Ячейка 1</td>
                      <td>Ячейка 2</td>
          </tr>
     </thead>
     <tbody>
           <tr>
              <td>тест</td>
               <td></td>
          </tr>
           <tr>
              <td>тест</td>
               <td></td>
          </tr>
      </tbody>
</table>
<script>
$('.testTable').on('click', 'td', function () {
            $(this).next('td').html(1);
});
</script>

В реалиях надо заполнить ее нажав на другую кнопку.
То есть, пользователь жмет на ячейку в таблице, у него открывается другое окно. В этом окно есть кнопка ОК. По нажатию на нее должно выполнится $(this).next('td').html('запись от пользователя'); .Только this не кнопки ok, а ячейки куда он нажимал до этого.

Не пойму как это сделать

[рони]

Artur_Hopf,
https://javascript.ru/forum/misc/455...tml#post302151
https://javascript.ru/forum/dom-wind...tml#post302977

[Artur_Hopf]

рони,

Спасибо, решил просто вынесением расположения ячейка за функцию:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="row">
<div class="col-2">
    <button id="but" type="button" class="btn btn-primary">Изменить</button>
</div>
<div class="col-9">
  <table class="table table-bordered table-hover  testTable table-sm">
    <thead>
       <tr class="bg-info text-white">
         <td>Ячейка 1</td>
           <td>Ячейка 2</td>
        </tr>
    </thead>
    <tbody>
        <tr>
           <td>тест</td>
           <td></td>
        </tr>
        <tr>
            <td>тест2</td>
            <td></td>
        </tr>
     </tbody>
   </table>
</div>
<script>
var tableTd;
$('.testTable').on('click', 'td', function () {
            tableTd = $(this).next('td');
});
$('#but').click(function(){
      tableTd.html('нужная ячейка');
});

</script>

[Dilettante_Pro]

А зачем кнопка?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="row">
<div class="col-2">
  </div>
<div class="col-9">
  <table class="table table-bordered table-hover  testTable table-sm">
    <thead>
       <tr class="bg-info text-white">
         <td>Ячейка 1</td>
           <td>Ячейка 2</td>
        </tr>
    </thead>
    <tbody>
        <tr>
           <td>тест</td>
           <td></td>
        </tr>
        <tr>
            <td>тест2</td>
            <td></td>
        </tr>
     </tbody>
   </table>
</div>
<script>
var tableTd;
$('.testTable').on('click', 'td', function () {
            $(this).next('td').html('нужная ячейка');
});


</script>

[рони]

<style type="text/css">
td.active + td:after{
    content: "нужная ячейка"
}

</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="row">
<div class="col-2">
  </div>
<div class="col-9">
  <table class="table table-bordered table-hover  testTable table-sm">
    <thead>
       <tr class="bg-info text-white">
         <td>Ячейка 1</td>
           <td>Ячейка 2</td>
        </tr>
    </thead>
    <tbody>
        <tr>
           <td>тест</td>
           <td></td>
        </tr>
        <tr>
            <td>тест2</td>
            <td></td>
        </tr>
     </tbody>
   </table>
</div>
<script>
var tableTd;
$('.testTable').on('click', 'td', function () {
            $(this).addClass('active');
});


</script>

[Dilettante_Pro]

рони,
Обман зрения

[Artur_Hopf]

Dilettante_Pro,
Кнопка, это клавиатура с iput. Страница на сенсорном экране открывается. Пользователь нажимает на интересующую его строку в таблице, запускается цифровая клавиатура. Он вводит данные и нажимает на кнопку. Вот решал куда передать данные input, передать через переменную tableTd.

[Dilettante_Pro]

Artur_Hopf, А можно наоборот: ввести данные в input и ткнуть в нужную строку

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="row">
<div class="col-2">
    <input type="text" id="buf">
  </div>
<div class="col-9">
  <table class="table table-bordered table-hover  testTable table-sm">
    <thead>
       <tr class="bg-info text-white">
         <td>Ячейка 1</td>
           <td>Ячейка 2</td>
        </tr>
    </thead>
    <tbody>
        <tr>
           <td>тест</td>
           <td></td>
        </tr>
        <tr>
            <td>тест2</td>
            <td></td>
        </tr>
     </tbody>
   </table>
</div>
<script>
var tableTd;
$('.testTable').on('click', 'td', function () {
            $(this).next('td').html($("#buf").val());
});


</script>

[Artur_Hopf]

Dilettante_Pro,
Интуитивно не удобно будет, но спасибо за совет =)

[Dilettante_Pro]

Artur_Hopf,

Интуитивно не удобно будет

Лично мне так как раз было бы удобнее и понятнее. И нет лишних действий