javascript - 如何使用 JavaScript 添加在 TD 中输入的每个值？

Question

我有一个行和列的列表。基本上，first_value 和 secondary_value 列是用户可以输入的输入类型，而 total 列是一个跨度。如何将first_value 和second_value 列添加到其特定行？

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 上单击的 id，但我不知道如何实现此计算，我的意思是如何计算并显示到其在行中的特定位置。任何帮助将不胜感激。

Answer 1

要实现此目的，您可以使用 jQuery 的 DOM 遍历方法来查找相对于引发事件的 input 的 span。具体来说，将 this 引用与 closest() 和 find() 一起使用。

另请注意，最好对重复内容使用通用类，而不是生成动态 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>