Q: Sum Table Task in HTML with DOM and JavaScript

Write a JS function that finds the first table in a document and sums the values in the last column. The result is then displayed in an element with ID "sum".

Input/Output:
There will be no input/output, your program should instead modify the DOM of the given HTML document.

Sample HTML:

<table>
  <tbody>
    <tr><th>Product</th><th>Cost</th></tr>
    <tr><td>Beer</td>   <td>2.88</td></tr>
    <tr><td>Fries</td>  <td>2.15</td></tr>
    <tr><td>Burger</td> <td>4.59</td></tr>
    <tr><td>Total:</td> <td id="sum"></td></tr>
  </tbody>
</table>
<button onclick="sum()">Sum</button>

Examples:

asked in JavaScript category by user john7

share on fb share via email

1 Answer

Here is my solution:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<table border="1">
    <tbody>
    <tr>
        <th>Product</th>
        <th>Cost</th>
    </tr>
    <tr>
        <td>Beer</td>
        <td>2.88</td>
    </tr>
    <tr>
        <td>Fries</td>
        <td>2.15</td>
    </tr>
    <tr>
        <td>Burger</td>
        <td>4.59</td>
    </tr>
    <tr>
        <td>Total:</td>
        <td id="sum"></td>
    </tr>
    </tbody>
</table>
<br>
<button onclick="sum()">Sum the Numbers from <strong>Cost</strong></button>

<script>
    function sum() {
        let rows = document.querySelectorAll("table tr td:last-child");
        let sum = 0;
        for (let i = 0; i < rows.length-1; i++) {
            sum += Number(rows[i].textContent);
        }

        document.getElementById("sum").textContent = sum;
    }
</script>

</body>
</html>

answered by user Jolie Ann

...

Q: Sum Table Task in HTML with DOM and JavaScript

Log in (click HERE) or Register (click HERE) to answer this question

1 Answer

Please Log in (click HERE) or Register (click HERE) to add a comment.

Q: Sum Table Task in HTML with DOM and JavaScript

Log in (click HERE) or Register (click HERE) to answer this question

1 Answer

Please Log in (click HERE) or Register (click HERE) to add a comment.

Related questions