Heim > Artikel > Web-Frontend > So durchlaufen Sie td-Elemente und summieren sie mit jQuery
In der Webentwicklung ist jQuery eine häufig verwendete JavaScript-Bibliothek. Sie kapselt eine große Anzahl häufig verwendeter DOM-Operationen und vereinfacht die Arbeit von Entwicklern. Eine der häufigsten Anforderungen besteht darin, eine bestimmte Spalte der Tabelle zu summieren. In diesem Artikel wird erläutert, wie Sie td-Elemente mit jQuery durchlaufen und summieren.
Für eine einfache Tabelle müssen Sie zuerst den tbody-Teil der Tabelle abrufen. Dazu können Sie den folgenden Code verwenden:
var tbody = $('table tbody');
Als nächstes müssen Sie jede Zeile von tr im tbody durchlaufen und dann jede td in der Zeile, um die erforderliche Summe zu finden. Summieren Sie die Spalten und addieren Sie die Zahlen in td. Der Code lautet wie folgt:
// 需要求和的列的索引值 var columnIndex = 1; // 用于累加列中的数字 var sum = 0; // 遍历每个 tr tbody.find('tr').each(function() { // 找到需要求和的列 var td = $(this).find('td').eq(columnIndex); // 将该列中的数字累加起来 sum += parseInt(td.text()); }); // 输出求和结果 console.log('总和为:' + sum);
Im obigen Code stellt die Variable columnsIndex den Indexwert der Spalte dar, die summiert werden muss, und die Variable sum wird zum Akkumulieren der Zahlen in der Spalte verwendet. Wenn Sie jedes tr in tbody durchqueren, verwenden Sie die Methode find, um den td zu finden, der sich in der Zeile in columnsIndex befindet, und verwenden Sie dann parseInt, um den Inhalt von td in Zahlen umzuwandeln und diese zur Summe zu addieren.
Bei der tatsächlichen Verwendung müssen Sie außerdem auf die folgenden Punkte achten:
Zusammenfassend lässt sich sagen, dass die Verwendung von jQuery zum Durchlaufen von td und sum ein relativ einfacher Vorgang ist. Sie müssen jedoch auf Genauigkeitsprobleme und den Umgang mit nicht numerischen Inhalten achten. Wenn Sie diesen Vorgang beherrschen, kann die Entwicklungseffizienz erheblich verbessert werden.
Das obige ist der detaillierte Inhalt vonSo durchlaufen Sie td-Elemente und summieren sie mit jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!