Javascript DOM with table

Projects
,
1 
<!DOCTYPE html>
<html lang="sv">

<head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 <title>Individuell uppgift 2 - Tabellhantering och beräkning</title>
 <link rel="stylesheet" type="text/css" href="style/bootstrap.min.css" />
 <link rel="stylesheet" type="text/css" href="style/style.css" />
</head>

<body>
 <div class="container">
 <div id="header" class="text-center px-3 py-3 pt-md-5 pb-md-4 mx-auto">
 <h1 class="display-4">Hemelektronik</h1>
 <p class="lead">Se våra utmärkta priser på hemelektronik i tabellen nedan</p>
 </div>
 <div id="content">
 <table id="pricetable" class="table table-hover">
 <thead class="thead-dark">
 <tr>
 <th>Artikelnr</th>
 <th>Produkttyp</th>
 <th>Varumärke</th>
 <th>Pris</th>
 <th>Antal</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>23456789</td>
 <td>Telefon</td>
 <td>Apple</td>
 <td>6500</td>
 <td>
 <input type="text" size="3" value="1" />
 </td>
 </tr>
 <tr>
 <td>22256289</td>
 <td>Telefon</td>
 <td>Samsung</td>
 <td>6200</td>
 <td>
 <input type="text" size="3" value="1" />
 </td>
 </tr>
 <tr>
 <td>24444343</td>
 <td>Telefon</td>
 <td>Huawei</td>
 <td>4200</td>
 <td>
 <input type="text" size="3" value="1" />
 </td>
 </tr>
 <tr>
 <td>19856639</td>
 <td>Surfplatta</td>
 <td>Apple</td>
 <td>4000</td>
 <td>
 <input type="text" size="3" value="1" />
 </td>
 </tr>
 <tr>
 <td>39856639</td>
 <td>Surfplatta</td>
 <td>Samsung</td>
 <td>2800</td>
 <td>
 <input type="text" size="3" value="1" />
 </td>
 </tr>
 <tr>
 <td>12349862</td>
 <td>Surfplatta</td>
 <td>Huawei</td>
 <td>3500</td>
 <td>
 <input type="text" size="3" value="1" />
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>
 <script src="scripts/calculate.js"></script>
</body>

</html>

I want to add 1 columns and a button to do the summary of the table, see picture above.

Want to use DOM to solve the problem. The button must be named

Id=“sumrow”, the CSS file have a section for making the blue color.

What happened when we add more rows to the table in html? Will the table automatically update?
Please help.

Can anyone help me out? PLEASE, with codes. Js is totaly new for me.

image
image1158×594 46.2 KB

2

Hi @ashley0716 Apologies for the massive delay in replying. We will check this, try to replicate it on our side, and share the solution once done. We may also request more context if we need to replicate it. I will let you know.

3

Yes, when you add more rows to the HTML table, the table will automatically update to display the additional rows. You don’t need to do anything special to update the table.The browser will automatically adjust the height of the table to accommodate the new rows and will display them in the correct order.

Coding part, i send you on message. Please check and do let us know if it helps you.