81 lines
2.2 KiB
JavaScript
81 lines
2.2 KiB
JavaScript
'use strict'
|
|
|
|
function addItemToTable(name, genre, rating) {
|
|
console.info('Try to add item');
|
|
|
|
const table = document.querySelector("#tbl-items tbody");
|
|
if (table == null) {
|
|
throw 'Table is not found';
|
|
}
|
|
|
|
const linesCount = document.querySelectorAll("#tbl-items tbody tr").length;
|
|
|
|
const id = 'item-' + Date.now();
|
|
const tableHtml =
|
|
'<tr id="' + id + '">\
|
|
<th scope="row">' + (linesCount + 1) + '</th>\
|
|
<td>' + name +'</td>\
|
|
<td>' + genre + '</td>\
|
|
<td>' + rating.toFixed(2) + '</td>\
|
|
<td><button class="btn btn-danger" onclick="removeItemFromTable(\''+ id +'\')">Удалить</button></td>\
|
|
</tr>';
|
|
table.innerHTML += tableHtml;
|
|
|
|
console.info('Added');
|
|
}
|
|
|
|
function removeItemFromTable(id) {
|
|
console.info('Try to remove item');
|
|
|
|
if (!confirm('Do you really want to remove this item?')) {
|
|
console.info('Canceled');
|
|
return;
|
|
}
|
|
|
|
const item = document.querySelector('#' + id);
|
|
if (item == null) {
|
|
throw 'Item with id [' + id + '] is not found';
|
|
}
|
|
item.remove();
|
|
|
|
const numbers = document.querySelectorAll("#tbl-items tbody tr th");
|
|
for (let i = 0; i < numbers.length; i++) {
|
|
numbers[i].innerHTML = i + 1;
|
|
}
|
|
|
|
console.info('Removed');
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
console.info('Loaded');
|
|
|
|
const form = document.querySelector("#frm-items");
|
|
if (form !== null) {
|
|
form.addEventListener('submit', function(event) {
|
|
console.info('Form onsubmit');
|
|
event.preventDefault();
|
|
|
|
const name = document.querySelector("#name");
|
|
if (name == null) {
|
|
throw 'Name control is not found';
|
|
}
|
|
|
|
const genre = document.querySelector("#genre");
|
|
if (genre == null) {
|
|
throw 'Count control is not found';
|
|
}
|
|
|
|
const price = document.querySelector("#price");
|
|
if (rating == null) {
|
|
throw 'Price control is not found';
|
|
}
|
|
|
|
|
|
addItemToTable(name.value, genre.value, parseFloat(rating.value));
|
|
|
|
name.value = '';
|
|
rating.value = 0;
|
|
genre.value = '';
|
|
});
|
|
}
|
|
}); |