/    Sign up×
Bounties /Pin to ProfileBookmark

Javascript DOM

<!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.

.table {
    background: white;
} 

tr#sumrow {
    background-color: #cce4ff;
}

tr#sumrow td:first-child::after{
    content: "\a0";
}

And I have a bootstrap.min, a very long file with numbers which I do not understand.

to post a answer
HTMLJavaScript

15 Replies

Davinci•003 auto-replyTo add a column for the summary and a button to perform the summary calculation, you can modify the existing HTML code and use DOM manipulation in JavaScript. Here's how you can do it:

1. First, update your table header by adding a new column named "Sum" after the "Antal" column.
<thead class="thead-dark">
<tr>
<th>Artikelnr</th>
<th>Produkttyp</th>
<th>Varumärke</th>
<th>Pris</th>
<th>Antal</th>
<th>Sum</th>
</tr>
</thead>


2. Next, add an empty cell in each row of the table body for the summary:
<tr>
...
<td>
<input type="text" size="3" value="1" />
</td>
<td class="sum"></td>
</tr>


3. Add a button below the table with the id="sumrow" and a blue color class, assuming your CSS file has a class .blue for the blue color:
<button id="sumrow" class="blue">Calculate Sum</button>

4. Now, create a JavaScript function in your calculate.js file to calculate the summary of each row when the button is clicked:

document.getElementById('sumrow').addEventListener('click', function () {
var table = document.getElementById('pricetable');
var rows = table.getElementsByTagName('tr');

for (var i = 1; i < rows.length; i++) {
var cells = rows[i].getElementsByTagName('td');
var price = parseFloat(cells[3].innerHTML);
var quantity = parseFloat(cells[4].getElementsByTagName('input')[0].value);
var sum = price * quantity;
cells[5].innerHTML = sum.toFixed(2);
}
});


If you add more rows to the table in the HTML, the script will still work as long as you have the same structure for the new rows. The summary calculation will automatically update when the "Calculate Sum" button is clicked.

Was this helpful?

Copy linkTweet thisAlerts:
@Ashley1288authorMar 29.2023 — @themolitor any idea
@themolitorI updated the Davinci•003 auto-reply. Let me know if that helps. NOTE: Your bounty title "Javascript DOM" is not a clear question. Be sure your bounty titles contain enough details and ask clear questions. This will help ensure you get the best auto-reply from Davinci and also allows others to get context of your needs before clicking into the bounty page. Also, please keep in mind that due to timezone differences some time may pass before a response is given. It's important that you allow enough time for others to respond before posting requests for replies.Mar 29.2023(updated)
@themolitorDavinci•003 is an automated feature that attempts to provide some assistance. I did not write that code and have not had a chance to test it.Mar 29.2023
Copy linkTweet thisAlerts:
@Ashley1288authorMar 29.2023 — Can the html part be done in JavaScript? It better so.
@themolitorDavinci•003 is an automated feature that attempts to provide some assistance. I did not write that code and have not had a chance to test it.Mar 29.2023
Copy linkTweet thisAlerts:
@Ashley1288authorMar 29.2023 — Can you please help me to do this re-programming? Plz.
@themolitorPlease allow time for others to reply. You do not need to keep posting requests for help.Mar 29.2023
Copy linkTweet thisAlerts:
@Ashley1288authorMar 29.2023 — @themolitor Can the html part be done in JavaScript? It better so
@themolitorDavinci•003 is an automated feature that attempts to provide some assistance. I did not write that code and have not had a chance to test it.Mar 29.2023(updated)
Copy linkTweet thisAlerts:
@Ashley1288authorMar 29.2023 — @themolitor plz help
Copy linkTweet thisAlerts:
@Ashley1288authorMar 29.2023 — I want add a row, the blue one, with id=“sumrow”.
Then add a button, class btn and btn-primary.
Can you help me? Plz.
Copy linkTweet thisAlerts:
@Ashley1288authorMar 29.2023 — Must be done with JavaScript DOM.
Copy linkTweet thisAlerts:
@Ashley1288authorMar 29.2023 — @themolitor I want to add a row, the blue one, with id=“sumrow”.
Then add a button, class btn and btn-primary..
The task must be done with JavaScript DOM.
Plz help.
Copy linkTweet thisAlerts:
@Ashley1288authorMar 29.2023 — Hi,
I still have a problem

-Add the column titled "Sum".

-Add a new row to the end of the table. Sums for the number of products and the final sum for the price must then be added to this row. This row should be assigned id=”sumrow” . This is important because there is an existing CSS style for this id that gives the row a light blue color.

-Create a button: . This should be inserted after the table. The button should have the text "Calculate price". Feel free to give the button the classes btnand btn-primaryto give it the right style.
@Ashley1288author@themolitor How can I send the css-fileMar 29.2023
Copy linkTweet thisAlerts:
@Ashley1288authorMar 29.2023 — Hi,
I still have a problem

-Add the column titled "Sum".

-Add a new row to the end of the table. Sums for the number of products and the final sum for the price must then be added to this row. This row should be assigned id=”sumrow” . This is important because there is an existing CSS style for this id that gives the row a light blue color.

-Create a button: . This should be inserted after the table. The button should have the text "Calculate price". Feel free to give the button the classes btn and btn-primary to give it the right style.
Copy linkTweet thisAlerts:
@Ashley1288authorMar 29.2023 — @themolitor plz help
Copy linkTweet thisAlerts:
@Ashley1288authorMar 30.2023 — var tbl =document.getElementById("pricetable").rows[0];
var column = document.createElement("th");
var TextNode = document.createTextNode("Summa");
column.appendChild(TextNode);
tbl.appendChild(column);



var table = document.getElementById("pricetable");
var tr = document.createElement("tr");
var col=document.getElementById('pricetable').rows[0].cells.length;
table.appendChild(tr);

for(var i=0;i<=col-1;i++){
var td = document.createElement("td");
td.innerHTML = i;
tr.appendChild(td);

}
var table1 = document.getElementById("tbody");
table1.id="sumrow";


document.getElementById('sumrow').addEventListener('click', function () {
var table = document.getElementById('pricetable');
var rows = table.getElementsByTagName('tr');

for (var i = 1; i < rows.length; i++) {
var cells = rows[i].getElementsByTagName('td');
var price = parseFloat(cells[3].innerHTML);
var quantity = parseFloat(cells[4].getElementsByTagName('input')[0].value);
var sum = price * quantity;
cells[5].innerHTML = sum.toFixed(2);
}
});
Copy linkTweet thisAlerts:
@Ashley1288authorMar 30.2023 — still not right!!!!
Copy linkTweet thisAlerts:
@Ashley1288authorMar 30.2023 — @themolitor plz help Me
×

Success!

Help @Ashley1288 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 7.21,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ,
analytics: Fullres
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: Anonymous,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 1000 SATS,

tipper: @Nanditha,
tipped: article
amount: 1000 SATS,
)...