Javascript DOM

Joined
Mar 27, 2023
Messages
18
Reaction score
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.
 

Attachments

  • 4506A60C-8D78-428D-83F6-3D4810E22F14.png
    4506A60C-8D78-428D-83F6-3D4810E22F14.png
    59.8 KB · Views: 5
Joined
Jul 3, 2022
Messages
93
Reaction score
23
Those buttons are for covards, who needs them ))

HTML:
<!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>
<style>
th, td, [type="text"]{
  text-align: center;
  padding: 5px;
  }
tr:has([colspan="4"]){
  background-color: #d1e3fd;
  }
</style>
</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>
<th>Summa</th>
</tr>
</thead>
<tbody>
<tr>
<td>23456789</td>
<td>Telefon</td>
<td>Apple</td>
<td>6500</td>
<td>
<input type="text" size="3" value="0" />
</td>
<td>-</td>
</tr>
<tr>
<td>22256289</td>
<td>Telefon</td>
<td>Samsung</td>
<td>6200</td>
<td>
<input type="text" size="3" value="0" />
</td>
<td>-</td>
</tr>
<tr>
<td>24444343</td>
<td>Telefon</td>
<td>Huawei</td>
<td>4200</td>
<td>
<input type="text" size="3" value="0" />
</td>
<td>-</td>
</tr>
<tr>
<td>19856639</td>
<td>Surfplatta</td>
<td>Apple</td>
<td>4000</td>
<td>
<input type="text" size="3" value="0" />
</td>
<td>-</td>
</tr>
<tr>
<td>39856639</td>
<td>Surfplatta</td>
<td>Samsung</td>
<td>2800</td>
<td>
<input type="text" size="3" value="0" />
</td>
<td>-</td>
</tr>
<tr>
<td>12349862</td>
<td>Surfplatta</td>
<td>Huawei</td>
<td>3500</td>
<td>
<input type="text" size="3" value="0" />
</td>
<td>-</td>
</tr>
<tr>
<td colspan="4"></td>
<td>-</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
const tab = document.querySelector('#pricetable'),
      inps = tab.querySelectorAll('[type="text"]'),
      costs = [...tab.querySelectorAll('td:last-of-type')]
                 .filter( x => x.closest('tr')
                    .querySelector('td:nth-child(1)') !== document.querySelector('[colspan="4"]') ),
      tot_quant = tab.querySelector('tr:last-of-type td:nth-child(2)'),
      tot_sum = tab.querySelector('tr:last-of-type td:nth-child(3)');
      
      [...inps].forEach( x => x.addEventListener( 'keyup', function(e){
         const trg = e.target;
         trg.value = trg.value.replace(/[^\d]+/g, '');
         const val = +trg.value,
               price = +trg.closest('tr').querySelector('td:nth-child(4)').textContent;
         
         trg.closest('tr').querySelector('td:last-of-type').innerHTML = val > 0 ? val * price : '-';
         tot_quant.innerHTML = [...inps]
                                  .map( a => +a.value )
                                     .reduce( (a, b) => a + b, 0 );
         tot_sum.innerHTML = costs
                                .filter( n => n.textContent.match(/[\d]+/g) )
                                   .map( k => +k.textContent )
                                      .reduce( (a, b) => a + b, 0 );
      } ));
</script>
</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,767
Messages
2,569,570
Members
45,045
Latest member
DRCM

Latest Threads

Top