Javascript DOM

Ashley · Mar 29, 2023

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

Padonak · Mar 30, 2023

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>

Sort by number of characters	1	Nov 2, 2023
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
I am using 2 loops, 1 for input and 1 for td. Can we achieve the same functionality with 1 loop in Jquery?	4	Sep 29, 2023
How can I calculate the last payment of the year to be the sum of all previous payments for that year and subtracting it from Research Costs value?	7	Aug 22, 2023
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript?	0	May 1, 2023
Filter table rows based on multiple checkboxes value	2	Jan 13, 2023
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript?	0	May 1, 2023
Getting extra blank rows from appending HTML..?	2	Oct 24, 2023

Javascript DOM

Ashley

Attachments

Padonak

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads