Question

<table>
<?php 
for($i=1;$i<=10;$i++)
{
?>
<tr>
  <td><input type="text" class="form-control changesNo" id="id_<?php echo $i;?>" name="quantity" value="" ></td>
  <td><span id="sp_<?php echo $i;?>">200</span></td>
  <td><span id="tt_<?php echo $i;?>"></span></td></tr>
<?php
}
?>
</table>
<span id="gotal"></span>

这里创建了10行。要在文本框中输入数字，同时显示文本框值和范围值，例如：（rslt =＃id_1 *＃sp_1），并在＃tt_1 上显示其结果。 #tt_1 的总和显示在 #gotal

请帮助我

Answer 1

如果您需要在每次输入更改其值时计算总和：

输入更改的事件处理程序是

$（ 'input.form-control.changesNo'）。在（ '输入' ....
因为您感兴趣的每组元素都有相同的后缀，您可以使用：

element.id.split（ '_'）。弹出（）
您需要从父表行开始：

$（元素）.closest（ 'TR'）
要选择带有以字符串开头的id的元素，您可以使用：

$（ '跨度[ID ^ = “TT _”]'）

汇总所有以前的观点这是我的片段：

$(function () {
  function refreshSums(element) {
    var currentSuffix = element.id.split('_').pop();
    var sp = $('#sp_' + currentSuffix);
    var tt = $('#tt_' + currentSuffix);
    if (!isNaN(element.value) && element.value.length != 0) {
      tt.text(+element.value * +sp.text());
      var total = 0;
      $('span[id^="tt_"]').each(function (index, element) {
        if (!isNaN(element.textContent) && element.textContent.length != 0) {
          total += +element.textContent;
        }
      });
      $('#gotal').text(total);
    } else {
      tt.text('');
      $('#gotal').text('');
    }

  }

  // refresh the sums on document ready
  $('input.form-control.changesNo').on('input', function (e) {
    refreshSums(this);
  });

  // compute the sums on document ready
  $('input.form-control.changesNo').each(function (index, element) {
    refreshSums(element);
  });
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<table>
    <tr>
        <td><input type="text" class="form-control changesNo" id="id_1" name="quantity" value=""></td>
        <td><span id="sp_1">200</span></td>
        <td><span id="tt_1"></span></td>
    </tr>
    <tr>
        <td><input type="text" class="form-control changesNo" id="id_2" name="quantity" value=""></td>
        <td><span id="sp_2">200</span></td>
        <td><span id="tt_2"></span></td>
    </tr>
    <tr>
        <td><input type="text" class="form-control changesNo" id="id_3" name="quantity" value=""></td>
        <td><span id="sp_3">200</span></td>
        <td><span id="tt_3"></span></td>
    </tr>
</table>
<span id="gotal"></span>

如何显示动态创建的span id

1 个答案: