两个数字的百分比，并显示另一个数字的结果

时间：2017-09-19 06:46:56

标签： javascript jquery

我有一个由tr和td组成的表格，我希望在第三个td中显示已售票的百分比。例如：

(4*100)/30="13"

并在第三个td中显示结果。我怎么能用jquery做到这一点？

＆＃13;
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<th>Avalable</th> <!--available-->
<th>Sold</th> <!--used-->
<th>Result</th>
</tr>
</thead>
<tr>
<td>30</td> <!--available-->
<td>4</td> <!--used-->
<td><span class="result"></span></td>
</tr>

<tr>
<td>20 <br/> 20</td> <!--available-->
<td>6  <br/> 5</td>  <!--used-->
<td><span class="result"></span></td>
</tr>
</table>
＆＃13;
＆＃13;
＆＃13;

5 个答案:

答案 0 :(得分：1)

您需要遍历tr并需要通过拆分内容来生成值，因为单个单元格可以包含多个值。

＆＃13;
＆＃13; 
// iterate ovet the tr inside the tbody
$('table tbody tr').each(function() {
  // cache the reference of this
  var $this = this,
    // get contents inside  second cell and split by non digit chars
    td2Value = $('td:nth-child(2)', $this) // get the second cell
    .html() // get html content
    .trim() // remove leading and trainilng space
    .split(/\D+/); // split by non-digit 
  // get span to show result
  $('span.result', $this).html(
    // get first cell and split content based on non digit and iterate
    $('td:nth-child(1)', $this) // get the first cell
    .html() // get html content
    .trim() // remove leading and trainilng space
    .split(/\D+/) // split by non-digit
    .map(function(v, i) {
      // calculate the percentage, if NaN then return 0
      // and then round the value to remove decimal part
      return Math.round((td2Value[i] * 100 / v) || 0);
      // in case you need 2 decimal part then use toFixed
      // return ((td2Value[i] * 100 / v) || 0).toFixed(2); 
    })
    // join the result with br tag to show in multi line
    .join('<br>'));
})
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <thead>
    <tr>
      <th>Avalable</th>
      <!--available-->
      <th>Sold</th>
      <!--used-->
      <th>Result</th>
    </tr>
  </thead>
  <tr>
    <td>30</td>
    <!--available-->
    <td>4</td>
    <!--used-->
    <td><span class="result"></span></td>
  </tr>

  <tr>
    <td>20 <br/> 20</td>
    <!--available-->
    <td>6 <br/> 5</td>
    <!--used-->
    <td><span class="result"></span></td>
  </tr>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

试试这个：

$('tr').each(function() {
    var value1 = parseInt($(this).find("td:eq(0)").text(), 10);
    var value2 = parseInt($(this).find("td:eq(1)").text(), 10);
    var result = $(this).find(".result")
    var valueFinal = (value2*100)/value1
    $(result).html(valueFinal)
    
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<th>Avalable</th> <!--available-->
<th>Sold</th> <!--used-->
<th>Result</th>
</tr>
</thead>
<tr>
<td>30</td> <!--available-->
<td>4</td> <!--used-->
<td><span class="result"></span></td>
</tr>

<tr>
<td>20 <br/> 20</td> <!--available-->
<td>6  <br/> 5</td>  <!--used-->
<td><span class="result"></span></td>
</tr>
</table>

答案 2 :(得分：0)

在这里，您可以使用解决方案https://jsfiddle.net/kr6mtq21/ 

$('tr').each(function(){
  $(this).find('span.result').html(((parseInt($(this).find('td:nth-child(2)').text()) * 100) / parseInt($(this).find('td:nth-child(1)').text())).toFixed(2));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <thead>
    <tr>
      <th>Avalable</th> <!--available-->
      <th>Sold</th> <!--used-->
      <th>Result</th>
    </tr>
  </thead>
  <tr>
    <td>30</td> <!--available-->
    <td>4</td> <!--used-->
    <td><span class="result"></span></td>
  </tr>

  <tr>
    <td>20 </td> <!--available-->
    <td>6  </td>  <!--used-->
    <td><span class="result"></span></td>
  </tr>
</table>

希望这会对你有所帮助。

答案 3 :(得分：0)

假设您有以下表格（为您的表设置ID，可能会在您的页面上显示一些表格，这会破坏您的表格）

＆＃13;
＆＃13; 
    (function($){   
     $('document').ready(function(){ 
    $('#mytable tr').each(function(index) {
       // skip first row
       if(index !=0 ){
        var value1 = parseInt($(this).find("td:eq(0)").text(), 10);
        var value2 = parseInt($(this).find("td:eq(1)").text(), 10);
        var result = $(this).find(".result");
        var valueFinal = (value2/value1)*100;
        $(result).html(valueFinal + "% Sold");
       }
      })
    });
    }
    )(jQuery);
＆＃13; 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <table border="1" id="mytable">
    <thead>
    <tr>
    <th>Avalable</th> <!--available-->
    <th>Sold</th> <!--used-->
    <th>Result</th>
    </tr>
    </thead>
    <tr>
    <td>10</td> <!--available-->
    <td>5</td> <!--used-->
    <td><span class="result"></span></td>
    </tr>
    
    <tr>
    <td>20</td> <!--available-->
    <td>12</td>  <!--used-->
    <td><span class="result"></span></td>
    </tr>
    <tr>
    <td>40</td> <!--available-->
    <td>6</td>  <!--used-->
    <td><span class="result"></span></td>
    </tr>
    </table>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

你走了： 

$('.result').each((i, e) => {
  var $e = $(e);
  var r = $e.parent().parent().find('td');
  var p;
  if(/\<br\>/.test(r[0].innerHTML)) {
    var a_arr = r[0].innerHTML.split('<br>');
    var s_arr = r[1].innerHTML.split('<br>');
    a_arr.forEach((e,i) => {
      var t = parseInt((s_arr[i]/e)*100) + " <br>";
      p = p ? p + t : t;
    });
  } else {
    p = parseInt((r[1].innerHTML/r[0].innerHTML) * 100);
  }
  console.log(p);
  $e.html(p)
  console.log();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <table border="1">
    <thead>
    <tr>
    <th>Avalable</th> <!--available-->
    <th>Sold</th> <!--used-->
    <th>Result</th>
    </tr>
    </thead>
    <tr>
    <td>30</td> <!--available-->
    <td>4</td> <!--used-->
    <td><span class="result"></span></td>
    </tr>

    <tr>
    <td>20 <br/> 20</td> <!--available-->
    <td>6  <br/> 5</td>  <!--used-->
    <td><span class="result"></span></td>
    </tr>
    </table>

相关问题
最新问题