Witam,
Natrafiłem na zadanie, w którym muszę dodać funkcjonalność pozwalającą na dodawanie nowych przedmiotów do tabeli i ich wyświetlanie oraz pokazanie nowej łącznej sumy kosztów wszystkiego.
Kod, do którego mam dodać funkcjonalność:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Zadanko</title>
</head>
<body>
<header>
<h1>PRZEDMIOTY</h1>
</header>
<main>
<table>
<thead>
<tr>
<th>ID</th>
<th>NAZWA_PRZEDMIOTU</th>
<th>LICZBA</th>
<th>KOSZT</th>
<th>RAZEM</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Plecak</td>
<td>1</td>
<td>50,99 zł</td>
<td>50,99 zł</td>
</tr>
<tr>
<td>2</td>
<td>Krzesło</td>
<td>4</td>
<td>25 zł</td>
<td>100 zł</td>
</tr>
<tr>
<td>KOSZT WSZYSTKICH RAZEM</td>
<td>150,99 zł</td>
</tr>
</tbody>
</table>
</main>
<form>
<table>
<thead>
<tr><td>
<h2>DODAWANIE NOWEGO PRZEDMIOTU</h2>
</td></tr>
</thead>
<tr>
<td>NAZWA_PRZEDMIOTU:</td>
<td><input></td>
</tr>
<tr>
<td>LICZBA:</td>
<td><input></td>
</tr>
<tr>
<td>KOSZT:</td>
<td><input></td>
</tr>
<tr>
<td>
<input type="button" value="dodaj">
</td>
</tr>
</table>
</form>
</body>
</html>
A więc najpierw zająłem się dodawaniem nowych przedmiotów do tabeli w tym celu tak zmodyfikowałem kod i dodałem plik main.js
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Zadanko</title>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<header>
<h1>PRZEDMIOTY</h1>
</header>
<main>
<table>
<thead>
<tr>
<th>ID</th>
<th>NAZWA_PRZEDMIOTU</th>
<th>LICZBA</th>
<th>KOSZT</th>
<th>RAZEM</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Plecak</td>
<td>1</td>
<td>50,99 zł</td>
<td>50,99 zł</td>
</tr>
<tr>
<td>2</td>
<td>Krzesło</td>
<td>4</td>
<td>25 zł</td>
<td>100 zł</td>
</tr>
<tr>
<td>KOSZT WSZYSTKICH RAZEM</td>
<td>150,99 zł</td>
</tr>
</tbody>
</table>
</main>
<form>
<table>
<thead>
<tr><td>
<h2>DODAWANIE NOWEGO PRZEDMIOTU</h2>
</td></tr>
</thead>
<tr>
<td>NAZWA_PRZEDMIOTU:</td>
<td><input type="text" name="nazwa" id="nazwa" /></td>
</tr>
<tr>
<td>LICZBA:</td>
<td><input type="text" name="liczba" id="liczba" /></td>
</tr>
<tr>
<td>KOSZT:</td>
<td><input type="text" name="koszt" id="koszt" /></td>
</tr>
<tr>
<td>
<button onclick="addRow();">Add Row</button>
</td>
</tr>
</table>
</form>
</body>
</html>
JS:
function addRow(){
// get input values
var nazwa = document.getElementById('nazwa').value;
var liczba = document.getElementById('liczba').value;
var koszt = document.getElementById('koszt').value;
var suma = (cena*ilosc);
// get the html table
// 0 = the first table
var table = document.getElementsByTagName('table')[0];
// add new empty row to the table
// 0 = in the top
// table.rows.length = the end
// table.rows.length/2+1 = the center
var newRow = table.insertRow(table.rows.length);
var id = table.rows.length;
// add cells to the row
var cel1 = newRow.insertCell(0);
var cel2 = newRow.insertCell(1);
var cel3 = newRow.insertCell(2);
var cel4 = newRow.insertCell(3);
var cel5 = newRow.insertCell(4);
// add values to the cells
cel1.innerHTML = id;
cel2.innerHTML = nazwa;
cel3.innerHTML = liczba;
cel4.innerHTML = koszt;
cel5.innerHTML = suma;
}
Problem w tym, że nie dodaje mi na koniec tabeli... albo doda na ułamek sekundy i znika tzn. czasem w ogole nic nie dodaje a czasem jest tak ze jak klikne button to doda na mili sekunde i znika, ktos wie gdzie robię błąd?