前一行之间的差异

时间:2017-08-08 09:03:29

标签: jquery

我有下表:



<table>
  <tr>
    <th>Year</th>
    <th>Total</th>
    <th>Diff</th>
    <th>Percentage</th>
  </tr>
  <tr>
    <td>2017</td>
    <td>80,000</td>
    <td>?</td>
    <td>?</td>
  </tr>

  <tr>
    <td>2016</td>
    <td>65,000</td>
    <td>?</td>
    <td>?</td>
  </tr>

  <tr>
    <td>2015</td>
    <td>59,000</td>
    <td>?</td>
    <td>?</td>
  </tr>

  <tr>
    <td>2014</td>
    <td>32,000</td>
    <td>?</td>
    <td>?</td>
  </tr>

</table>
&#13;
&#13;
&#13;

如果问号是针对DIFF和%,我需要将之前的行相互比较,并计算出总数和百分比的差异。

我对jquery相对较新,对于如何实现这一点感到非常困惑。

任何帮助都会很棒。

4 个答案:

答案 0 :(得分:1)

试试这个。使用,删除td innerhtml中的replace()eq()函数用于查找每行元素的特定索引

&#13;
&#13;
var total_val =parseFloat($('table tr').find('td').eq('1').text().replace(',',''))
$('table tr').each(function(){
var a = parseFloat($(this).prev('tr').find('td').eq(1).text().replace(',','')|0)-parseFloat($(this).find('td').eq(1).text().replace(',',''))
$(this).prev('tr').find('td').eq(2).text(a)
$(this).prev('tr').find('td').eq(3).text((a / total_val) * 100+'%')

})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Year</th>
    <th>Total</th>
    <th>Diff</th>
    <th>Percentage</th>
  </tr>
  <tr>
    <td>2017</td>
    <td>80,000</td>
    <td>?</td>
    <td>?</td>
  </tr>

  <tr>
    <td>2016</td>
    <td>65,000</td>
    <td>?</td>
    <td>?</td>
  </tr>

  <tr>
    <td>2015</td>
    <td>59,000</td>
    <td>?</td>
    <td>?</td>
  </tr>

  <tr>
    <td>2014</td>
    <td>32,000</td>
    <td>?</td>
    <td>?</td>
  </tr>

</table>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您可以使用每个遍历表格的行和.prev('tr')来获取上一行:

$('table tbody tr').each(function(){  
    var current_row = $(this);
    var previous_row = $(this).prev('tr');

    if( previous_row.html() ){

        //Compare 'previous_row' with 'current_row' here

    }
});

希望这有帮助。

$('table tbody tr').each(function(){  
    var current_row = $(this);
    var previous_row = $(this).prev('tr');
    
    if( previous_row.html() ){
      //Exemple
      console.log('Compare ' + current_row.find('td:eq(1)').text() +' with '+ previous_row.find('td:eq(1)').text());
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Year</th>
      <th>Total</th>
      <th>Diff</th>
      <th>Percentage</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2017</td>
      <td>80,000</td>
      <td>?</td>
      <td>?</td>
    </tr>

    <tr>
      <td>2016</td>
      <td>65,000</td>
      <td>?</td>
      <td>?</td>
    </tr>

    <tr>
      <td>2015</td>
      <td>59,000</td>
      <td>?</td>
      <td>?</td>
    </tr>

    <tr>
      <td>2014</td>
      <td>32,000</td>
      <td>?</td>
      <td>?</td>
    </tr>

  </tbody>
</table>

答案 2 :(得分:0)

<tbody></tbody>中包装非标题行。

然后使用Array#prototype.reduce()反向扫描行,将第一行(即最后一行)视为一种特殊情况:

$("table tbody tr").get().reverse().reduce(function(prevVal, tr, i) {
    var $tds = $(tr).find('td'),
        val = Number($tds.eq(1).text().replace(',',''))
		diff = val - prevVal;
    // console.log(val);
    $tds.eq(2).text((i > 0) ? diff : '-');
    $tds.eq(3).text((i > 0) ? ((100 * diff / prevVal).toFixed(1) + '%') : '-');
	return val;
}, 0);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Year</th>
    <th>Total</th>
    <th>Diff</th>
    <th>Percentage</th>
  </tr>
  <tbody>
  <tr>
    <td>2017</td>
    <td>80,000</td>
    <td>?</td>
    <td>?</td>
  </tr>

  <tr>
    <td>2016</td>
    <td>65,000</td>
    <td>?</td>
    <td>?</td>
  </tr>

  <tr>
    <td>2015</td>
    <td>59,000</td>
    <td>?</td>
    <td>?</td>
  </tr>

  <tr>
    <td>2014</td>
    <td>32,000</td>
    <td>?</td>
    <td>?</td>
  </tr>
  </tbody>
</table>

答案 3 :(得分:0)

只是想我添加自己的版本 - 它的效率远低于其他答案,但仍然如此。

&#13;
&#13;
var totals = [];

//for each <td> in the table, select only those which are the second child of their <tr>
//i.e. ech value in the 'total' column
$("table td:nth-child(2)").each(function() {

  totals.push($(this).text().replace(/\,/g,''));
  //totals.push adds an item to the array 'totals'
  //$(this).text() selects the value of the current total being iterated
  //replace (/\,/g,'') gets rid of any commas (useful for finding out the difference later)
});

var i = 0;
var j = totals.length-2;
var k = totals.length-2;
var len = totals.length;
var diff = [];
var perc = [];

for (var i; i<len-1; i++) {
  diff.push(parseInt(totals[len-(i+2)]) - parseInt(totals[len-(i+1)]));
  //we're again adding each element we iterate over to the array of differences
  //totals[len-(i+2)] we take the first total and subtract the second from it
  //and we need to parseInt() to do maths on them (they are strings as-is)
  //and continue this doen the column, i.e. second minus third, etc.
  //and we have to go 'backwards' because we want a difference
  
  perc.push(Math.round(((parseInt(totals[len-(i+2)]) - parseInt(totals[len-(i+1)]))/(parseInt(totals[len-(i+2)])))*100));
}

$("table td:nth-child(3)").each(function() {
  //now we populate the 'diff' column with our already-worked-out values for the differences
  if (j==-1) { $(this).text("-"); return false; }
  //if we've reached the botttom of the column, the last value, there will be no difference nothing to compare it against)
  //so we just put a dash and terminate the 'loop' - 'return false'
  
  $(this).text(diff[j]);
  //for each thing being iterated over, give it the value of the correct item in the diff array
  j--;
  //we're again working backwards so we iterate backwards
});

$("table td:nth-child(4)").each(function() {
//and we do exactly the same as with the diff column
  if (k==-1) { $(this).text("-"); return false; }
  $(this).text(perc[k]+"%");
  k--;
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Year</th>
    <th>Total</th>
    <th>Diff</th>
    <th>Percentage</th>
  </tr>
  <tr>
    <td>2017</td>
    <td>80,000</td>
    <td>?</td>
    <td>?</td>
  </tr>
  <tr>
    <td>2016</td>
    <td>65,000</td>
    <td>?</td>
    <td>?</td>
  </tr>
  <tr>
    <td>2015</td>
    <td>59,000</td>
    <td>?</td>
    <td>?</td>
  </tr>
  <tr>
    <td>2014</td>
    <td>32,000</td>
    <td>?</td>
    <td>?</td>
  </tr>
  <tr>
    <td>2013</td>
    <td>34,000</td>
    <td>?</td>
    <td>?</td>
  </tr>
</table>
&#13;
&#13;
&#13;