https://jsfiddle.net/a2edrk7a/43/
Помогите все выгрузить в один файл с этого сайта.
что не так?
<html>
<head>
<link rel="stylesheet" type="text/css" href="стили.css">
script type="text/javascript">
function selectInputText(table) {
$('input', table).on('focus', function() {
$(this).select();
});
}
// деактивировать поля
function deactiveInput(table) {
$('input', table).attr('disabled', 'disabled').removeClass('active');
$('select', table).attr('disabled', 'disabled').removeClass('active');
}
// активировать поля
function activeInput(table) {
$('input[name="user"]', table).removeAttr('disabled').addClass('active');
$('input[name="date"]', table).removeAttr('disabled').addClass('active');
$('select[name="category"]', table).removeAttr('disabled').addClass('active');
$('input[name="nomination"]', table).removeAttr('disabled').addClass('active');
$('input[name="sum"]', table).removeAttr('disabled').addClass('active');
}
// получить данные с хранилища
function getData(table) {
if (localStorage['data']) {
var data = JSON.parse(localStorage['data']);
$('input[name="number"]', table).val('1');
$('input[name="user"]', table).val(data[1].user);
$('input[name="date"]', table).val(data[1].date);
$('select[name="category"]', table).val(data[1].category);
$('input[name="nomination"]', table).val(data[1].nomination);
$('input[name="sum"]', table).val(data[1].sum);
} else {
$('input[name="number"]', table).val('1');
activeInput(table);
$('td.edit', table).addClass('disabled');
$('td.new', table).addClass('disabled');
$('td.save', table).removeClass('disabled');
}
}
// редактировать данные с хранилища
function editData(table) {
$('td.edit', table).on('click', function() {
if (localStorage['data']) {
$('td.new', table).addClass('disabled');
$('td.cancel', table).removeClass('disabled');
$('td.save', table).removeClass('disabled');
activeInput(table);
$('td.edit', table).attr('data-func', 'del').html('delete');
}
});
}
// создать данные в хранилище
function newData(table) {
$('td.new', table).on('click', function() {
if (localStorage['data']) {
$('td.edit', table).addClass('disabled');
$('td.new', table).addClass('disabled');
$('td.cancel', table).removeClass('disabled');
$('td.save', table).removeClass('disabled');
$('input[name="number"]', table).val('1');
$('input[name="user"]', table).val('');
$('input[name="date"]', table).val('');
$('select[name="category"]', table).val('');
$('input[name="nomination"]', table).val('');
$('input[name="sum"]', table).val('');
}
});
}
// отменить редактирование
function cancelEdit(table) {
$('td.cancel', table).on('click', function() {
if (localStorage['data']) {
deactiveInput(table);
$('td.new', table).removeClass('disabled');
$('td.edit', table).removeClass('disabled').attr('data-func', 'edit').html('edit');
$('td.save', table).addClass('disabled');
$('td.cancel', table).addClass('disabled');
}
});
}
// получить данные с полей ввода
function getInput(table) {
$('td.save', table).on('click', function() {
if (localStorage['data']) {
var data = JSON.parse(localStorage['data']);
} else {
var data = {};
}
number = $('input[name="number"]', table).val();
//
if (number != '') {
data[number] = {
"user": $('input[name="user"]', table).val(),
"date": $('input[name="date"]', table).val(),
"category": $('select[name="category"]', table).val(),
"nomination": $('input[name="nomination"]', table).val(),
"sum": $('input[name="sum"]', table).val()
};
//
var dataJSON = JSON.stringify(data);
localStorage['data'] = dataJSON;
}
$('td.new', table).removeClass('disabled');
$('td.edit', table).removeClass('disabled').attr('data-func', 'edit').html('edit');;
$('td.cancel', table).addClass('disabled');
$('td.save', table).addClass('disabled');
deactiveInput(table);
});
}
$(document).ready(function() {
var table = $('#content table'); // переменная объекта таблицы для последующего употребления
$('td.save', table).addClass('disabled');
$('td.cancel', table).addClass('disabled');
deactiveInput(table);
selectInputText(table);
getData(table);
newData(table);
editData(table);
cancelEdit(table);
getInput(table);
});
</script>
</head>
<body>
<div id="content">
<!-- таблица -->
<table>
<!-- tr строки таблицы -->
<tr class="nav">
<!-- левая ячейка-->
<td class="new">new</td>
<!-- правая ячейка -->
<td class="edit" data-func="edit">edit</td>
</tr>
<tr class="nav">
<!-- левая ячейка-->
<td class="save">save</td>
<!-- правая ячейка -->
<td class="cancel">cancel</td>
</tr>
<tr class="nav">
<td class="prev">??</td>
<td class="next">??</td>
</tr>
<!-- и так дальше-->
<tr>
<td>№ п/п</td>
<td>
<!-- поле ввода -->
<input type="number" name="number" />
</td>
</tr>
<tr>
<td>Дата</td>
<td>
<input type="date" name="date" />
</td>
</tr>
<tr>
<td>Ваше имя</td>
<td>
<input type="text" name="user" />
</td>
</tr>
<tr>
<td>Категория</td>
<td>
<select name="category" >
<option value="Подарки">Подарки</option>
<option value="Кафе и рестораны">Кафе и рестораны</option>
<option value="Спорт">Спорт</option>
<option value="Еда">Еда</option>
<option value="Транспрт">Транспорт</option>
</select>
</td>
</tr>
<tr>
<td>Наименование</td>
<td>
<input type="text" name="nomination" />
</td>
</tr>
<tr>
<td>Стоимость, руб.</td>
<td>
<input type='number' name='sum' value='0' />
</td>
</tr>
<tr>
<td>ИТОГО:</td>
<td>
<!-- здесь поля ввода не надо -->
</td>
</table>
<!-- конец таблицы -->
</div>
</body>
</html>
