我有一個表，它包含一個 td 值和另一個 td 中的輸入，它也包含一個值。
我想得到 td 值和包含輸入的另一個 td 的總和。
這是代碼，但它不能完美地工作：
let gross = 0;
$(".total").each(function() {
gross += parseFloat($(this).val());
});
document.getElementById('gross_amount').innerHTML = gross;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<td>#</td>
<td>Name</td>
<td>Age</td>
<td>Salary</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Hazem</td>
<td>20</td>
<td class="total">50.00</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>25</td>
<td><input class="total" type="text" value="60.00" /></td>
</tr>
</tbody>
<div id="gross_amount"></div>
</table>問題是因為一個元素是 atd而另一個是 an input，並且只有input元素具有value要讀取的屬性val()。
要解決此問題，您可以使用以下元素檢測元素類型，tagName然後根據該元素檢索text()或val()：
let gross = 0;
$(".total").each(function() {
let $el = $(this);
gross += parseFloat(this.tagName == 'INPUT' ? $el.val() : $el.text());
});
$('#gross_amount').text(gross.toFixed(2));<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<td>#</td>
<td>Name</td>
<td>Age</td>
<td>Salary</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Hazem</td>
<td>20</td>
<td class="total">50.00</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>25</td>
<td><input class="total" type="text" value="60.00" /></td>
</tr>
</tbody>
</table>
<div id="gross_amount"></div>請注意，#gross_amountdiv 需要在<table>元素之外才能使 HTML 有效。此外，如果您已經加載了 jQuery，那麼您最好保持代碼一致並使用它來更新#gross_amount元素。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句