Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>Agenda telefonică</title>
- <style type="text/css">
- body {
- font-family: tahoma;
- font-size: 11pt;
- line-height: 1.2em;
- margin: 0;
- padding: 12px;
- }
- h1 {
- background-color: Navy;
- color: White;
- margin: 0;
- padding: 16px;
- margin: -12px -12px 20px -12px;
- }
- table {
- border: 1px solid Gray;
- border-collapse: collapse;
- text-align: left;
- }
- td, th {
- padding: 8px 12px;
- border-bottom: 1px solid Gray;
- }
- th {
- background-color: #EEEEEE;
- }
- caption {
- padding: 8px 12px;
- border: 1px solid Gray;
- border-bottom: none;
- background-color: #E0E0E0;
- font-weight: bold;
- }
- tfoot {
- background-color: #EEEEEE;
- font-weight: bold;
- }
- form {
- border: 1px solid Gray;
- border-radius: 5px;
- background-color: #EEEEEE;
- padding: 16px;
- float:right;
- }
- label {
- }
- input {
- font-size: 11pt;
- }
- input[type="button"] {
- font-weight: bold;
- padding: 5px;
- }
- table{
- float:left;
- width:60%;
- }
- form{
- float: right;
- width:30%;
- }
- label{
- display:block;
- float:left;
- clear:both;
- width:30%
- }
- input{
- display:block;
- float:right;
- width:60%;
- margin:4px;
- }
- h1{
- /* position: relative; */
- /* arata exact ca pana acum doar ca
- daca noi ii spunem top 100 se duce de la ultimul punct vede unde
- sunt 100px si il deseneaza aici, dar spatiul lui ramane insemnat
- acolo unde era initial
- si la fel pe orizontala*/
- /*position:absolute;*/
- position:fixed; /*el nu mai e pozitionat fata de parinte
- ca la relativ, este poz fata de fereastra*/
- top:50px;
- left:-60px;
- /*daca avem poz abs el o sa caute mereu primul parinte*/
- }
- </style>
- <script type="text/javascript">
- /*vrem sa ne apeleze functia cand a term de incarcat pagina*/
- document.addEventListener('DOMContentLoaded', appStart);
- function appStart(){
- document.querySelector('#btnAdauga').addEventListener('click',adauga);
- }
- function adauga(){
- var nume= document.querySelector('#nume').value;
- var prenume= document.querySelector('#prenume').value;
- var telefon = document.querySelector('#telefon').value;
- var tbody = document.querySelector('tbody');
- var rand = document.createElement('tr');
- tbody.append(rand);
- let adaugaCelula= text => {
- var celula = document.createElement('td');
- celula.innerText = text;
- rand.append(celula);
- };
- adaugaCelula(nume);
- adaugaCelula(prenume);
- adaugaCelula(telefon);
- }
- </script>
- </head>
- <body>
- <h1>Agenda telefonică</h1>
- <table>
- <caption>
- Lista persoane
- </caption>
- <thead>
- <tr>
- <th>Nume</th>
- <th>Prenume</th>
- <th>Telefon</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Popescu</td>
- <td>Ion</td>
- <td>023423222</td>
- </tr>
- <tr>
- <td>Vasilescu</td>
- <td>Maria</td>
- <td>073423222</td>
- </tr>
- </tbody>
- <tfoot>
- <tr>
- <td colspan="3">Număr persoane: 2</td>
- </tr>
- </tfoot>
- </table>
- <form action="#" class="controls">
- <label for="nume">Nume:</label>
- <input name="nume" id="nume">
- <label for="prenume">Prenume:</label>
- <input name="prenume" id="prenume">
- <label for="Telefon">Telefon:</label>
- <input name="telefon" id="telefon">
- <input type="button" id="btnAdauga" name="btnAdauga" value="Adaugă">
- </form>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement