我有两个html表,每个表的总和与最后一行显示总和。 现在,我将从这个html表的总和结果中计算出速率
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box1">
<table width="100%">
<tbody>
<tr>
<td class="box_price-1" align="left">100</td>
<td class="box_price-1" align="left">200</td>
</tr>
<tr>
<td class="box_price-2" align="left">100</td>
<td class="box_price-2" align="left">200</td>
</tr>
<tr>
<td class="box_sum-1 box1-total-1" align="left"></td>
<td class="box_sum-2 box1-total-2" align="left"></td>
</tr>
</tbody>
</table>
</div>
<div class="box2">
<table width="100%">
<tbody>
<tr>
<td class="box_price-1" align="left">100</td>
<td class="box_price-1 box_price-m-2" align="left">2030</td>
</tr>
<tr>
<td class="box_price-2" align="left">1003</td>
<td class="box_price-2" align="left">230</td>
</tr>
<tr>
<td class="box_sum-1 box2-total-1" align="left"></td>
<td class="box_sum-2 box2-total-1" align="left"></td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
var total = 0;
$('.box1 .box_price-1').each(function() {
total += parseInt($(this).text());
});
$('.box1 .box_sum-1').append("<div class='sum'>" + total + "</div>");
console.log(total);
var total = 0;
$('.box1 .box_price-2').each(function() {
total += parseInt($(this).text());
});
$('.box1 .box_sum-2').append("<div class='sum'>" + total + "</div>");
console.log(total);
var total = 0;
$('.box2 .box_price-1').each(function() {
total += parseInt($(this).text());
});
$('.box2 .box_sum-1').append("<div class='sum'>" + total + "</div>");
console.log(total);
var total = 0;
$('.box2 .box_price-2').each(function() {
total += parseInt($(this).text());
});
$('.box2 .box_sum-2').append("<div class='sum'>" + total + "</div>");
console.log(total);
</script>
我有两个html表,每个表的总和与最后一行显示总和。 现在,我根据此html表的总和结果来计算速率
我想要显示这样的结果
rate1 =(box1-total-1)* 100 / box2-total-1 rate2 =(box1-total-2)* 100 / box2-total-2
<div class="rate1"></div>
<div class="rate2"></div>
答案 0 :(得分:1)
您使用的类名不正确。在第$('.box1 .box_price-1')
行中,有一个名为box_price1
而不是box_price-1
的类。
let box1Sum1 = 0;
$('.box1 .box_price1').each(function() {
box1Sum1 += parseInt($(this).text());
});
$('.box1 .box_sum-1').text(box1Sum1);
let box1Sum2 = 0;
$('.box1 .box_price2').each(function() {
box1Sum2 += parseInt($(this).text());
})
$('.box1 .box_sum-2').text(box1Sum2);
let box2Sum1 = 0;
$('.box2 .box_price1').each(function() {
box2Sum1 += parseInt($(this).text());
});
$('.box2 .box_sum-1').text(box2Sum1);
let box2Sum2 = 0;
$('.box2 .box_price2').each(function() {
box2Sum2 += parseInt($(this).text());
});
$('.box2 .box_sum-2').text(box2Sum2);
const rate1 = box1Sum1 * 100 / box2Sum1;
const rate2 = box1Sum2 * 100 / box2Sum2;
console.log(rate1, rate2);
$('div.rate1').text('Rate 1: ' + rate1 );
$('div.rate2').text('Rate 2: ' + rate2 );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box1">
<table width="100%" border="1">
<thead>
<th>Amount1</th>
<th>Amoutn2</th>
<th>Sum</th>
</thead>
<tbody>
<tr>
<td class="box_price1" align="left">100</td>
<td class="box_price1" align="left">200</td>
<td class="box_sum-1 box1-total-1" align="left"></td>
</tr>
<tr>
<td class="box_price2" align="left">100</td>
<td class="box_price2" align="left">200</td>
<td class="box_sum-2 box1-total-2" align="left"></td>
</tr>
</tbody>
</table>
</div>
<div class="box2">
<table width="100%" border="1">
<thead>
<th>Amount1</th>
<th>Amount2</th>
<th>Sum</th>
</thead>
<tbody>
<tr>
<td class="box_price1" align="left">100</td>
<td class="box_price1 box_price-m-2" align="left">2030</td>
<td class="box_sum-1 box2-total-1" align="left"></td>
</tr>
<tr>
<td class="box_price2" align="left">1003</td>
<td class="box_price2" align="left">230</td>
<td class="box_sum-2 box2-total-1" align="left"></td>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
<div class="rate1"></div>
<div class="rate2"></div>