logo标签列表

如何使用jQuery通过添加表格行来获取表格总数

jqueryhtml
4

我需要通过对具有相同id的表行进行加法运算来获取表总数，但是对于第一个表格，它计算正确，但对于第二个表格，它将第一个表格的总和加起来并显示出来。如何避免将其添加到第二个表格中。

我的HTML代码：

<table>
  <tr style="background:#2b2e76">
    <th colspan="1" style="padding: 0;">
      <p style="color:white">
        Table One

      </p>
    </th>
    <th>
      <p style="color:white" class="BundleB4936" id="B4936">Total : <span class="BundelRowTotalB4936">1400.00</span></p>
    </th>
  </tr>
  <tr>
    <td>
      <input type="text" value="200.00" name="row_total[]" id="rowtotal11_B4936" class="rowTotal">
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" value="1200.00" name="row_total[]" id="rowtotal12_B4936" class=" rowTotal">
    </td>
  </tr>
</table>
<table>
  <tr style="background:#2b2e76">
    <th colspan="1" style="padding: 0;">
      <p style="color:white">
        Table Two

      </p>
    </th>
    <th>
      <p style="color:white" class="BundleB1027" id="B1027">Total : <span class="BundelRowTotalB1027">1750.00</span></p>
    </th>
  </tr>
  <tr>
    <td>
      <input type="text" value="100.00" name="row_total[]" id="rowtotal16_B1027" class="rowTotal">
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" value="250.00" name="row_total[]" id="rowtotal17_B1027" class="rowTotal">
    </td>
  </tr>
</table>

我的jQuery：

 var Bsum = 0;
    var BundelID = '';
    $(".rowTotal").each(function() {
      var RowID = $(this).attr('id');
      var suffix = RowID.match(/\d+/)[0];
      BundelID = $('.BundleB' + suffix).attr('id');

      if (RowID.indexOf(BundelID) != -1) {
        var BValue = $('#' + RowID).val();
        if (!isNaN(BValue)) {
          Bsum += parseFloat(BValue);
        }
      }
      $('.BundelRowTotal' + BundelID).html(parseFloat(Bsum).toFixed(2));

    });

这是我得到的输出结果：

enter image description here

但我希望输出结果如下：

enter image description here

请问有什么建议吗？谢谢。
3个回答
2

您在 Ids Parse 中遇到了问题，请尝试使用以下代码替换原有代码

注意 -> 更改过的部分已被标注。

更新

 $("table").each(function() {
 var Bsum = 0;
  var BundelID = '';
$(this).find(".rowTotal").each(function() {

  var RowID = $(this).attr('id');
  //var suffix = RowID.match(/\d+/)[0];
  var suffix = RowID.split("_")[1];

  console.log(suffix)
  BundelID = $('.Bundle' + suffix).attr('id');
  console.log(BundelID);
  if (RowID.indexOf(BundelID) != -1) {
    var BValue = $('#' + RowID).val();
    if (!isNaN(BValue)) {
      Bsum += parseFloat(BValue);
    }
  }
  console.log(Bsum);
  $('.BundelRowTotal' + BundelID).html(parseFloat(Bsum).toFixed(2));

});
});

这里有一个可用的副本。 注意-> 我从HTML中删除了总和，数字是由代码计算的。

代码和示例已更新，请检查。希望这能有所帮助。 - Mohammed Elshennawy
刚刚检查了你的代码，它只取表格的最后一行并添加。这对你来说是如何工作的？ - 06011991
太好了！非常感谢你 :) - 06011991
2
尝试这样做：迭代每个表格，然后迭代每个表格中的输入，计算总值。 

 $(function(){
       $('table').each(function(){
          var $totalRow = $(this).find('span[class^="BundelRowTotal"]');
          var total = 0.0;
          $(this).find('input.rowTotal').each(function(){
             total += parseFloat($(this).val()) || 0.0;
          });
          $totalRow.html(parseFloat(total).toFixed(2));
       });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr style="background:#2b2e76">
    <th colspan="1" style="padding: 0;">
      <p style="color:white">
        Table One

      </p>
    </th>
    <th>
      <p style="color:white" class="BundleB4936" id="B4936">Total : <span class="BundelRowTotalB4936">1400.00</span></p>
    </th>
  </tr>
  <tr>
    <td>
      <input type="text" value="200.00" name="row_total[]" id="rowtotal11_B4936" class="rowTotal">
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" value="1200.00" name="row_total[]" id="rowtotal12_B4936" class=" rowTotal">
    </td>
  </tr>
</table>
<table>
  <tr style="background:#2b2e76">
    <th colspan="1" style="padding: 0;">
      <p style="color:white">
        Table Two

      </p>
    </th>
    <th>
      <p style="color:white" class="BundleB1027" id="B1027">Total : <span class="BundelRowTotalB1027"></span></p>
    </th>
  </tr>
  <tr>
    <td>
      <input type="text" value="100.00" name="row_total[]" id="rowtotal16_B1027" class="rowTotal">
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" value="250.00" name="row_total[]" id="rowtotal17_B1027" class="rowTotal">
    </td>
  </tr>
</table>

1

var val1 = +$('#rowtotal11_B4936').val();
var val2 = +$('#rowtotal12_B4936').val();
$('.BundelRowTotalB4936').text(val1+val2);

var val3 = +$('#rowtotal16_B1027').val();
var val4 = +$('#rowtotal17_B1027').val();
$('.BundelRowTotalB1027').text(val4+val3);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<table>
  <tr style="background:#2b2e76">
    <th colspan="1" style="padding: 0;">
      <p style="color:white">
        Table One

      </p>
    </th>
    <th>
      <p style="color:white" class="BundleB4936" id="B4936">Total : <span class="BundelRowTotalB4936"></span></p>
    </th>
  </tr>
  <tr>
    <td>
      <input type="text" value="200.00" name="row_total[]" id="rowtotal11_B4936" class="rowTotal">
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" value="1200.00" name="row_total[]" id="rowtotal12_B4936" class=" rowTotal">
    </td>
  </tr>
</table>
<table>
  <tr style="background:#2b2e76">
    <th colspan="1" style="padding: 0;">
      <p style="color:white">
        Table Two

      </p>
    </th>
    <th>
      <p style="color:white" class="BundleB1027" id="B1027">Total : <span class="BundelRowTotalB1027">1750.00</span></p>
    </th>
  </tr>
  <tr>
    <td>
      <input type="text" value="100.00" name="row_total[]" id="rowtotal16_B1027" class="rowTotal">
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" value="250.00" name="row_total[]" id="rowtotal17_B1027" class="rowTotal">
    </td>
  </tr>
</table>

你的代码片段得到了和原帖相同的错误结果。 - Jamiec
你希望第二个表格只添加第二个表格的值？ - Mamunur Rashid
现在检查一下，您想要这样吗？ - Mamunur Rashid
这不是我的问题！ - Jamiec
这不能被硬编码，因为这里所有的ID都是动态生成的。你能找一个替代方案吗？ - 06011991
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接