Ich entwickle eine einfache Anwendung zur Finanzverfolgung. Im Antrag gibt es eine Tabelle mit allen Spesenabrechnungen und außerhalb der Tabelle den Gesamtbetrag.
Ich versuche mit JS oder AJAX eine Möglichkeit zu finden, so dass ich, wenn ich ein Kontrollkästchen in einer Tabellenzeile auswähle, eine Rechnung in die Gesamtsumme einbeziehen/ausschließen kann und die Gesamtsumme automatisch aktualisiert wird, um den Ausschluss/die Einbeziehung widerzuspiegeln.
Tabellenzeilen werden dynamisch erstellt. Jedes Mal, wenn eine neue Rechnung hinzugefügt wird, werden die Zeilen also um eins erhöht, was bedeutet, dass die Kontrollkästchen-ID erhöht werden muss.
<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>
Ich habe ein bisschen JS
const checkbox = document.getElementById('myCheckbox')
checkbox.addEventListener('change', (event) => {
if (event.currentTarget.checked) {
alert('checked');
} else {
alert('not checked');
}
})
Dies löst zwar die Warnung aus, wenn ein Kontrollkästchen ausgewählt ist, diese wird jedoch nur beim ersten Kontrollkästchen ausgelöst, da es sich um das Kontrollkästchen mit derselben ID handelt.
Das könnte also eine knifflige Aufgabe sein, da ich das Kontrollkästchen JS benötige, um zu wissen, wie hoch der Betrag für die Zeile ist, in der das Kontrollkästchen aktiviert ist, und um diese Zahl dann von der Gesamtsumme abzuziehen oder umgekehrt. Vielleicht ist das der falsche Ansatz?
Die Gesamtsumme wird angezeigt als:
<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>
Danke
你只需要委派
我必须在 h3 中展开你的 span，以免 JavaScript 变得非常混乱
给总数一个ID，这样比
document.querySelector("h3.text-danger span")更容易。此脚本不需要 ID
选中时包含
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; }