How to sum a table using JavaScript

With the development of the Internet, more and more websites need to use tables to display data. In tables, summation is a very basic operation. In JavaScript, we can use loops to implement table summing functionality. This article explains how to sum tables using JavaScript.

HTML table structure

Before introducing how to sum tables, let’s first understand the table structure in HTML.

Name	Age	Achievements
小明	18	85
小红	19	90
Xiaogang	20	80

As shown above, a basic HTML table consists of table, thead, tbody, It is composed of elements such as tr, th and td.

Among them, table represents the entire table, thead represents the header, tbody represents the table body, tr represents a row of data, th represents the header cell, and td represents the data cell.

JavaScript table summation implementation

Next, we will introduce how to use JavaScript to implement the table summation function.

First, we need to find the data cells in the table that need to be summed. In the example above, we need to sum the grades. We can use the following code to get the score cell:

const scores = document.querySelectorAll('table tbody tr td:nth-child(3)');

In the above code , querySelectorAll function can obtain td elements in all tables. Among them, :nth-child(3) means to get the third td element of each row, that is, the grade cell.

Next, we need to iterate through the obtained grade cells and add up each value. The code is as follows:

let sum = 0;
scores.forEach((score) => {
sum = Number(score.innerText);
});

In the above code, we use the forEach function to traverse all the grade cells and add each value to the sum variable. It should be noted that since innerText returns a string type value, you need to use the Number function to convert it to a numeric type.

Finally, we only need to display the value of sum on the page. The code is as follows:

const result = document.createElement('div');
result.innerText = Total score: ${sum};
document.body.append (result);

Through the above code, we can implement the sum function of the specified columns in the table.

Summary

This article introduces how to use JavaScript to perform sum operations on HTML tables, by finding the elements that need to be summed, using traversal and accumulation operations, and finally displaying the calculation on the page As a result, a simple sum operation is implemented.

The operation of tables is an essential part of web development, and mastering this knowledge is crucial to improving development efficiency. The content introduced in this article can help readers gain a deeper understanding of the application of JavaScript in tabular data processing, and also help readers gain a deeper understanding of excellent practical ideas for JavaScript development, so as to better develop excellent applications.

The above is the detailed content of How to sum a table using JavaScript. For more information, please follow other related articles on the PHP Chinese website!