如何使用 jquery 访问动态 td 值？答案

【问题标题】：How to access dynamic td value using jquery?如何使用 jquery 访问动态 td 值？
【发布时间】：2022-01-20 22:37:09
【问题描述】：

首先我想访问 Amount 值，然后将其用作每个循环，因此可以访问动态字段数量。如果您能帮助我，这将是您的极大帮助。

$(document).ready(function() {
  $('tr').each(function() {
    var totalAmt = 0;
    $(this).find('.total').each(function() {
      var myval = $(this).html();
      if (myval.length !== 0) {
        totalAmt += parseFloat(myval);
        alert(totalAmt);
      }
    });
  });
});

<table class="table table-bordered table-responsive mytable">
  <thead>
    <tr>
      <th class="itm-detl">Project Selection</th>
      <th class="itm-detl">Item Details</th>
      <th class="qaunt-th width-100">Hours</th>
      <th class="qaunt-th width-100">Rate</th>
      <th class="qaunt-th width-100">Amount</th>
      <th class="blank-th"></th>
    </tr>
  </thead>
  <tbody id="appended">
    <tr>
      <td>
        <input type="text" id="project" name="project_selection[]" class="form-control select-item project ui-autocomplete-input" placeholder="Type or click to select Project" style="border: none;" autocomplete="off">
      </td>
      <td>
        <input type="text" id="itemdetails" name="item_details[]" class="form-control select-item description ui-autocomplete-input" placeholder="Type or click to select Item" style="border: none;" autocomplete="off">
      </td>
      <td>
        <input type="text" name="hour[]" class="form-control qaunt-td hour" placeholder="0.00" value="">
      </td>
      <td>
        <input type="text" name="rate[]" class="form-control qaunt-td rate" placeholder="0.00" value="">
      </td>
      <td id="tamt" class="total-amt total">0.00</td>
    </tr>
  </tbody>
</table>

Below code is dynamic one which appears when add new button is clicked.
<!-- Form ends here -->
<table class="table table-bordered table-responsive" style="display: none;">
  <tbody id="copyStructure">
    <tr>
      <td>
        <input type="search" id="project" name="project_selection[]" class="form-control select-item project" placeholder="Type or click to select Project" style="border: none;" autocomplete="off">
        <input type="hidden" name="search" id="search-id" />
      </td>
      <td>
        <input type="text" id="itemdetails" name="item_details[]" class="form-control select-item description" placeholder="Type or click to select Item" style="border: none;" autocomplete="off">
      </td>
      <td>
        <input type="text" name="hour[]" class="form-control qaunt-td hour" placeholder="0.00" value="">
      </td>
      <td>
        <input type="text" name="rate[]" class="form-control qaunt-td rate" placeholder="0.00" value="">
      </td>
      <td class="total-amt total">0.00</td>
      <input type="hidden" name="amount[]">
      <td class="total-amt">
        <button type="button" class="remove btn btn-danger" name="removeBtn" id="removeBtn"><i class="fas fa-minus"></i></button>
      </td>
    </tr>
  </tbody>
</table>

view

我无法获得 class= '.total' 的值，我必须添加每个总计行才能创建最终总计。也可以检查 html。

【问题讨论】：

如果你想得到所有 .total TD 值的总和，那么你需要移动 var totalAmt = 0;在每个（Tr each）循环之外。
@KHIMAJIVALUKIYA 不过，它并不能解决主要问题。很好，你已经注意到我的错误了。
所有其他代码都是正确的，也许它的（HTML）在你的JS代码执行之后呈现，如果它在之前运行，那么你需要在整个HTML呈现之后执行JS函数
@KHIMAJIVALUKIYA 我以某种方式得到了它，但它运行了 2 次，一次是实际值，另一次是空值。我用过这段代码 $(document).on('change', '.rate', function () { $(".finalt").each(function () { var sample = $(this).text() ; alert(sample); // if (sample != '') { // sample += parseFloat(sample); // } }); });

标签： jquery codeigniter-3

【解决方案1】：

我已经通过使用代码解决了这个问题，错误并没有那么大，因为它与变量名发生冲突。

function calculateSubTotal() {
    var p_amt = 0;
    $(".total").each(function () {
        var sample1 = parseFloat($(this).text());
        if (sample1 != '') {
            p_amt += sample1;
        }
    });
    $('#subtotal').html(p_amt);
    $('#finaltotal').html(p_amt);
}

【讨论】：