Привет! Вопрос в чем - когда я кликаю на поле ?<td> в таблице в .html коде мне js выводит другую табл.
Проблема в том что кликнув еще раз таблица выводиться еще раз. Как сделать чтоб по клику выводилась только один раз динамическая табл!
<body>
<th:block th:include="/admin/fragments/menu-body :: menu"></th:block>
<div class="container-fluid">
<h2>Периоды действия</h2>
<button class="btn btn-success" data-toggle="modal" data-target="#Validity">Добавить</button>
<button class="btn btn-danger" onclick="deleteSchedule()">Удалить</button>
<button class="btn btn-info" onclick="refresh()">Обновить</button>
<input class="offset-1" type="checkbox">Показвать удаленные
</div>
<div class="container-fluid left-table">
<div class="row">
<div class=" col-4">
<table class="table col-6" id="Schedule-list">
<thead>
<tr>
<th>Наименование</th>
</tr>
</thead>
<tbody>
<tr th:each="validity : ${validity}" class="item">
<td class="viewName" th:text="${validity.nameValidity}"></td>
<td>
<button class="btn .btn-primary btn-sm addSchedule" data-toggle="modal" data-target="#Schedule"><span class="fa fa-plus" aria-hidden="true"></span></button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-6">
<h4>Название:</h4>
<div class="form-group">
<input type="hidden" id="id"/>
<input class="form-control col-4" id="scheduleListName"/>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th><label>Начало</label></th>
<th><label>Окончание</label></th>
<th><label>Пн</label></th>
<th><label>Вт</label></th>
<th><label>Ср</label></th>
<th><label>Чт</label></th>
<th><label>Пт</label></th>
<th><label>Сб</label></th>
<th><label>Вс</label></th>
</tr>
</thead>
<tbody id="showSchedule">
</tbody>
</table>
</div>
</div>
<div class="fixed-bottom ">
<button class="btn btn-success" id="save" onclick="save()">Сохранить</button>
<button class="btn btn-info" onclick="exit()">Выйти без сохранения</button>
<button class="btn btn-primary" onclick="saveAndExit()">Сохранить и выйти</button>
</div>
</div>
var csrfToken = $("meta[name='_csrf']").attr("content");
var csrfHeader = $("meta[name='_csrf_header']").attr("content");
$(document).ready(function () {
$('td.viewName').click(function () {
$('td').removeClass();
$(this).addClass('item-active');
getSelectedSchedule();
});
});
//выделение строк в таблице
function getSelectedSchedule() {
var td = $('#Schedule-list td.item-active');
var name = td.text();
$('#scheduleListName').val(name);
showSchedule(name);
}
function showSchedule(nameValidity) {
$.ajax({
type: "POST",
url: "/validity/get",
data: {nameValidity: nameValidity},
beforeSend: function (xhr) {
xhr.setRequestHeader(csrfHeader, csrfToken);
},
success: function (data) {
console.log(data);
for (var i = 0; i < data.length; i++) {
$('#showSchedule').append('<tr>' +
'<td><input type="time" value="' + data[i].beginTime + '"></td>' +
'<td><input type="time" value="' + data[i].endTime + '"></td>' +
'<td><input type="checkbox" class="monday"' +(data[i].monday ? 'checked' : '') + '></td>' +
'<td><input type="checkbox" class="tuesday"' +(data[i].tuesday ? 'checked' : '') + '></td>' +
'<td><input type="checkbox" class="wednesday"' +(data[i].wednesday ? 'checked' : '') + '></td>' +
'<td><input type="checkbox" class="thursday"' +(data[i].thursday ? 'checked' : '') + '></td>' +
'<td><input type="checkbox" class="friday"' +(data[i].friday ? 'checked' : '') + '></td>' +
'<td><input type="checkbox" class="saturday"' +(data[i].saturday ? 'checked' : '') + '></td>' +
'<td><input type="checkbox" class="sunday"' +(data[i].sunday ? 'checked' : '') + '></td>' +
'</tr>');
}
},
error: function (e) {
alert("error")
}
});
}