如何从div类计算费率?

时间:2019-06-14 17:19:12

标签: javascript jquery

我有两个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>

1 个答案:

答案 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>