Je développe une application simple de suivi financier. Dans l'application, il y a un tableau avec toutes les notes de frais puis le montant total situé en dehors du tableau.
J'essaie de trouver un moyen d'utiliser JS ou AJAX pour que lorsque je coche 1 case dans une ligne de tableau, je puisse inclure/exclure une facture du total et mettre à jour automatiquement le total pour refléter l'exclusion/inclusion.
Les lignes du tableau sont créées dynamiquement, donc chaque fois qu'une nouvelle facture est ajoutée, les lignes s'incrémentent, ce qui signifie que l'ID de la case à cocher doit être incrémenté.
<div class="card-body">
<table class="display table" style="width:100%" id="example">
<thead class="table-heading">
<tr class="table-border">
<th scope="col">#</th>
<th scope="col">CREDITOR</th>
<th scope="col">DESCRIPTION</th>
<th scope="col">CATEGORY</th>
<th scope="col">AMOUNT</th>
<th scope="col" style="text-align: center">INCLUDE / EXCLUDE</th>
</tr>
</thead>
<tbody>
{% for item in debts %}
<tr class="table-border table-items">
<td>{{ forloop.counter }}</td>
<td>{{ item.creditor }}</td>
<td>{{ item.description }}</td>
<td>{{ item.category }}</td>
<td>£{{ item.amount }}</td>
<td><input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" class="table-checkbox" id="myCheckbox" /></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
J'ai un peu de JS
const checkbox = document.getElementById('myCheckbox')
checkbox.addEventListener('change', (event) => {
if (event.currentTarget.checked) {
alert('checked');
} else {
alert('not checked');
}
})
Cela déclenche l'alerte lorsqu'une case est cochée, mais cela ne se déclenchera que sur la première case puisque c'est celle avec le même ID.
Cela pourrait donc être une tâche délicate car j'ai besoin de la case à cocher JS pour savoir quel est le montant de la ligne avec la case à cocher cochée, puis soustraire ce nombre du total ou vice versa. Peut-être que ce n’est pas la bonne approche ?
Le total s'affiche comme suit :
<h3 class="text-right text-danger"><i class="mdi mdi-cube icon-size float-left"></i><span class="font-weight-bold">£{{total_monthly_outgoing|floatformat:2}}<span class="h6"> per month</span></span></h3>
Merci
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Il vous suffit de déléguer
Je dois étendre votre span en h3 pour éviter que JavaScript ne devienne vraiment compliqué
Donnez une pièce d'identité au total, c'est plus facile que
document.querySelector("h3.text-danger span").Ce script ne nécessite pas d'identifiant
Inclure une fois sélectionné
const totalContainer = document.querySelector("h3.text-danger span"); document.querySelector(".card-body").addEventListener("click", (e) => { if (!e.target.matches(".table-checkbox")) return; // not a checkbox const total = [...document.querySelectorAll(".table-checkbox:checked")] .map(chk => +chk.closest("td").previousElementSibling.textContent.slice(1)) // remove the pound .reduce((a,b)=> a+b); // sum totalContainer.textContent = `£${total.toFixed(2)}`; }).table-checkbox { border: 2px dotted #00f; display: block; background: #ff0000; }