我生成多个表,结构相同但值不同,在php / mysql中有一个循环。我有一个脚本来汇总所有值并显示结果,但仅当值在同一行时才有效。我只需要总结一下“precio”栏目。
这是一个HTML。这是表格的结构:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('tr').each(function () {
var sum = 0
$(this).find('.precio').each(function () {
var precio = $(this).text();
if (!isNaN(precio) && precio.length !== 0) {
sum += parseFloat(precio);
}
});
$('.total_prt', this).html(sum);
});
});
</script>
<table class="table table-striped">
<thead>
<tr>
<th width="70%">Descripción</th>
<th width="20%">Precio</th>
</tr>
</thead>
<tbody>
<tr>
<td>Display</td>
<td class="precio">1300</td>
</tr>
<tr>
<td>Keyboard</td>
<td class="precio">300</td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total_prt"><b>$</b></td>
</tr>
</tbody>
</table>
<br>
<table class="table table-striped">
<thead>
<tr>
<th width="70%">Descripción</th>
<th width="20%">Precio</th>
</tr>
</thead>
<tbody>
<tr>
<td>HDD</td>
<td class="precio">400</td>
</tr>
<tr>
<td>System</td>
<td class="precio">425</td>
</tr>
<tr>
<td>Something</td>
<td class="precio">350</td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total_prt"><b>$</b></td>
</tr>
</tbody>
</table>
答案 0 :(得分:2)
您需要单独遍历所有表,并在表循环外部初始化sum
,而不是在其中。
$(document).ready(function() {
$('.table').each(function() {
var sum = 0
$(this).find('tr').each(function() {
$(this).find('.precio').each(function() {
var precio = $(this).text();
if (!isNaN(precio) && precio.length !== 0) {
sum += parseFloat(precio);
}
});
$('.total_prt', this).html(sum);
});
})
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th width="70%">Descripción</th>
<th width="20%">Precio</th>
</tr>
</thead>
<tbody>
<tr>
<td>Display</td>
<td class="precio">1300</td>
</tr>
<tr>
<td>Keyboard</td>
<td class="precio">300</td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total_prt"><b>$</b></td>
</tr>
</tbody>
</table>
<br>
<table class="table table-striped">
<thead>
<tr>
<th width="70%">Descripción</th>
<th width="20%">Precio</th>
</tr>
</thead>
<tbody>
<tr>
<td>HDD</td>
<td class="precio">400</td>
</tr>
<tr>
<td>System</td>
<td class="precio">425</td>
</tr>
<tr>
<td>Something</td>
<td class="precio">350</td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total_prt"><b>$</b></td>
</tr>
</tbody>
</table>
&#13;
答案 1 :(得分:0)
如果你这样做,它会起作用。
$(document).ready(function () {
$('.table').each(function (i, elem) {
var totalPrice = 0;
$(elem).find("td.precio").each(function(j, elem2) {
totalPrice += parseFloat($(elem2).html());
})
$(elem).find(".total_prt").html(totalPrice);
});
});
答案 2 :(得分:0)
$('body').find('table').each(function() {
var sum = 0;
$(this).find('tr').each(function() {
$(this).find('td').each(function() {
if ($(this).hasClass('precio')) {
var precio = $(this).text();
if ($.isNumeric(precio)) {
sum += parseFloat(precio);
}
}
});
});
$(this).find('td.total_prt').text(sum);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th width="70%">Descripción</th>
<th width="20%">Precio</th>
</tr>
</thead>
<tbody>
<tr>
<td>Display</td>
<td class="precio">1300</td>
</tr>
<tr>
<td>Keyboard</td>
<td class="precio">300</td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total_prt"><b>$</b></td>
</tr>
</tbody>
</table>
<br>
<table class="table table-striped">
<thead>
<tr>
<th width="70%">Descripción</th>
<th width="20%">Precio</th>
</tr>
</thead>
<tbody>
<tr>
<td>HDD</td>
<td class="precio">400</td>
</tr>
<tr>
<td>System</td>
<td class="precio">425</td>
</tr>
<tr>
<td>Something</td>
<td class="precio">350</td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total_prt"><b>$</b></td>
</tr>
</tbody>
</table>
&#13;
答案 3 :(得分:0)
我所做的是循环遍历total
元素,并将所有precio
元素文本相加以输出总数。
$('.total_prt').each(function() {
var sum = 0;
$(this).parents('table').find('.precio').each(function() {
var floted = parseFloat($(this).text());
if (!isNaN(floted)) sum += floted;
});
$(this).html(sum);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th width="70%">Descripción</th>
<th width="20%">Precio</th>
</tr>
</thead>
<tbody>
<tr>
<td>Display</td>
<td class="precio">1300</td>
</tr>
<tr>
<td>Keyboard</td>
<td class="precio">300</td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total_prt"><b>$</b></td>
</tr>
</tbody>
</table>
<br>
<table class="table table-striped">
<thead>
<tr>
<th width="70%">Descripción</th>
<th width="20%">Precio</th>
</tr>
</thead>
<tbody>
<tr>
<td>HDD</td>
<td class="precio">400</td>
</tr>
<tr>
<td>System</td>
<td class="precio">425</td>
</tr>
<tr>
<td>Something</td>
<td class="precio">350</td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total_prt"><b>$</b></td>
</tr>
</tbody>
</table>
&#13;
答案 4 :(得分:-1)
您同时将var sum = 0;
和$('.total_prt', this).html(sum)
置于错误的位置 - 您需要将它们移动到外面 $('tr').each(...)
循环。