我有下表:
<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;
如果问号是针对DIFF和%,我需要将之前的行相互比较,并计算出总数和百分比的差异。
我对jquery相对较新,对于如何实现这一点感到非常困惑。
任何帮助都会很棒。
答案 0 :(得分:1)
试试这个。使用,
删除td innerhtml
中的replace()
。eq()
函数用于查找每行元素的特定索引
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;
答案 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)
只是想我添加自己的版本 - 它的效率远低于其他答案,但仍然如此。
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;