Untitled

avatar
unknown
html
2 years ago
2.3 kB
19
Indexable
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript">
      function adauga() {
        let tbody = document.querySelector("tbody");
        let rand = document.createElement("tr");
        let populeazaCelula = (camp) => {
          let celula = document.createElement("td");
          celula.innerText = document.querySelector("#" + camp).value;
          rand.append(celula);
        };
        populeazaCelula("oras");
        populeazaCelula("populatie");
        tbody.append(rand);
      }
      function calculeazaPopulatieTotala() {
        let tbody = document.querySelector('tbody');
        let randuri = tbody.querySelectorAll('tr');
        let tfoot = document.querySelector('tfoot');
        let totalPopulatie = 0;
    
        for (let i = 0; i < randuri.length; i++) {
            let populatieCelula = randuri[i].querySelectorAll('td')[1];
            totalPopulatie += parseInt(populatieCelula.innerText);
        }
    
        tfoot.querySelector('td').innerText = `Populatie totala: ${totalPopulatie}`;
    }
    
    function aplicatie() {
        document.querySelector("#btnAdauga").addEventListener("click", adauga);
        document.querySelector("#btnMaxim").addEventListener("click", calculeazaPopulatieTotala);
    }
    
    document.addEventListener("DOMContentLoaded", aplicatie);
    
    </script>
  </head>
  <body>
    <form>
      <label for="oras">Oras:</label>
      <input type="text" id="oras" />
      <label for="populatie">Populatie:</label>
      <input type="text" id="populatie" />
      <input type="button" value="Adauga" id="btnAdauga" />
      <input type="button" value="Maxim" id="btnMaxim" />
    </form>
    <table>
      <thead>
        <tr>
          <th>Oras</th>
          <th>Populatie</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Bucuresti</td>
          <td>3000000</td>
        </tr>
        <tr>
          <td>Iasi</td>
          <td>600000</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">Populatie totala: 320000</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>
Editor is loading...