Как я могу добавить каждое значение, введенное в моем TD, используя javascript?

Question

у меня есть список строк и столбцов. в основном столбцы first_value и second_value - это тип ввода, в который пользователь может войти, а столбец total - это интервал. как я могу добавить столбец first_value и second_value к его строке c? 1002 *

ID|    first_value |    second value |     total
1        0                 50                50
2        20                0                 20
3        10                0                 10
4        20                10                30
5        10                0                 10

here is my html/php code

<table class="table table-striped" id="user_set_goal_table" width="100%">
                         <thead>
                             <tr>
                                 <th>#</th>
                                 <th>First_value</th>
                                 <th>Second_value</th>
                                 <th>total</th>
                         </thead>
                         <tbody>
                                                 for($i=1;$i<=16;$i++){
                         ?>
                         <tr>
                             <td><?php echo $i; ?></td>
                            <td><?php echo "<input type='text'  class='navigate_TD_ID' id='first_value".$i."'  "; ?></td>
                             <td><?php echo "<input type='text' class='navigate_TD_ID'  id='second_value".$i."'  "; ?></td>
                            <td><?php echo "<span id='total".$i." '></span>"?></td>
                         </tr>
                         <?php
                         }
                         </tbody>

javascript code:

    $('.navigate_TD_ID').on('change', function() {
        var input_id = $(this).attr('id');
        alert(input_id);
    });

я уже могу узнать, какой идентификатор пользователь нажимает на TD, но я не знаю, как я реализовать эти расчеты, я имею в виду, как я могу рассчитать и отобразить его в определенную c позицию в строке. любая помощь будет очень признательна.

Answer 1

Для этого вы можете использовать jQuery методы обхода DOM, чтобы найти span относительно input, вызвавшего событие. В частности, используйте ссылку this вместе с closest() и find().

Также обратите внимание, что лучше использовать общие классы для повторяющегося контента вместо генерации динамических c id атрибутов. Попробуйте это:

$('.first, .second').on('input', function() {
  var $tr = $(this).closest('tr');
  var f = parseFloat($tr.find('.first').val()) || 0;
  var s = parseFloat($tr.find('.second').val()) || 0;
  $tr.find('.total').text(f + s);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped" id="user_set_goal_table" width="100%">
  <thead>
    <tr>
      <th>#</th>
      <th>First_value</th>
      <th>Second_value</th>
      <th>total</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td><input type="text" class="navigate first" /></td>
      <td><input type="text" class="navigate second" /></td>
      <td><span class="total"></span></td>
    </tr>
    <tr>
      <td>2</td>
      <td><input type="text" class="navigate first" /></td>
      <td><input type="text" class="navigate second" /></td>
      <td><span class="total"></span></td>
    </tr>
  </tbody>
</table>

Answer 2

Быстрый пример с ванилью js и без PHP

<table class="table table-striped" id="user_set_goal_table" width="50%">
   <thead style="text-align:left;">
       <tr>
          <th>#</th>
          <th>First_value</th>
          <th>Second_value</th>
          <th>total</th>
    </thead>
    <tbody>
    </tbody>
</table>

<script>

    // table body
    let tbody =  document.querySelectorAll('table tbody')[0];
    // trs
    let rows  = tbody.children;

    // fill table body
    for(let j = 0; j < 16; j++)
    {
        tbody.innerHTML += `
            <td>${j}</td>
            <td><input type="text" class="first"></td>
            <td><input type="text" class="second"></td>
            <td><span></span></td>
        `;
    }

    for(let i = 0; i < rows.length; i++)
    {
        let firstInput  = rows[i].children[1].firstElementChild;
        let secondInput = rows[i].children[2].firstElementChild;
        let total       = rows[i].children[3].firstElementChild;

        [firstInput, secondInput].forEach((elem) => {

            elem.addEventListener('input' ,(e) => {

                let first     = e.target.value;
                let second  = (e.target.className == "first") ? secondInput.value : firstInput.value;

                total.innerText = parseFloat(first) + parseFloat(second);
            });

        });
    }

Результат: