Colonne spécifique de la somme du tableau en javascript
Je ne parviens pas à savoir comment obtenir la colonne du montant total en fonction de l'état. Actuellement, je ne gère que la somme de toute ma colonne de montant. Le fait est que je veux obtenir la valeur du montant de la somme paidet le unpaidstatut du montant, par exemple comme l'image ci-dessous le Paidtotal devrait 15000et le Unpaiddevrait 10000. Ce serait formidable si quelqu'un pouvait savoir où je fais quelque chose de mal. Merci d'avance
var tds = document.getElementById('table').getElementsByTagName('td');
var sum = 0;
for(var i = 0; i < tds.length; i ++) {
if(tds[i].className == 'count-me') {
sum += isNaN(tds[i].innerHTML) ? 0 : parseInt(tds[i].innerHTML);
}
}
document.getElementById('table').innerHTML += '<tr><td>' + sum + '</td><td>total</td></tr>';<table id="table">
<tr>
<th >Status</th>
<th >AMOUNT</th>
</tr>
<tr>
<td >Paid</td>
<td class="count-me">5000</td>
</tr>
<tr>
<td >Paid</td>
<td class="count-me"> 5000</td>
</tr>
<tr>
<td >Unpaid</td>
<td class="count-me">5000</td>
</tr>
<tr>
<td >Unpaid</td>
<td class="count-me">5000</td>
</tr>
<tr>
<td >Paid</td>
<td class="count-me">5000</td>
</tr>
</table>Il existe de nombreuses manières. C'est l'un d'eux:
var tds = document.getElementById('table').getElementsByTagName('td');
var sum = 0;
var sumPaid = 0;
var sumUnpaid = 0;
for(var i = 0; i < tds.length; i ++) {
if(tds[i].className == 'count-me') {
sumPaid += tds[i-1].innerHTML == 'Paid' ? +tds[i].innerHTML : 0;
sumUnpaid += tds[i-1].innerHTML == 'Unpaid' ? +tds[i].innerHTML : 0;
sum += isNaN(tds[i].innerHTML) ? 0 : parseInt(tds[i].innerHTML);
}
}
document.getElementById('table').innerHTML += '<tr><td>' + sum + '</td><td>total</td></tr>';
document.getElementById('table').innerHTML += '<tr><td>' + sumPaid + '</td><td>total paid</td></tr>';
document.getElementById('table').innerHTML += '<tr><td>' + sumUnpaid + '</td><td>total unpaid</td></tr>';<table id="table">
<tr>
<th >Status</th>
<th >AMOUNT</th>
</tr>
<tr>
<td >Paid</td>
<td class="count-me">5000</td>
</tr>
<tr>
<td >Paid</td>
<td class="count-me"> 5000</td>
</tr>
<tr>
<td >Unpaid</td>
<td class="count-me">5000</td>
</tr>
<tr>
<td >Unpaid</td>
<td class="count-me">5000</td>
</tr>
<tr>
<td >Paid</td>
<td class="count-me">5000</td>
</tr>
</table>J'espère que c'est comme un devoir ou quelque chose comme ça. Dans une vraie application, vous ne faites pas les choses de cette façon. Vous faites ce genre de calculs AVANT de rendre la page ou d'utiliser une sorte de framework comme aide.
Je pense qu'un bon conseil serait pour vous de commencer à apprendre à faire les choses comme elles sont faites ces jours-ci avec un framework comme React ou Angular, ou encore mieux avec la programmation fonctionnelle.