Динамическая редактируемая таблица
товарищи. Возможно вопрос странный и ранее задавался, но я человек незнающий, прошу вашей помощи. Задача передо мной следующая: вывести на страницу таблицу. Двойное нажатие должно давать возможность редактировать помеченные классом ячейки двух возможных типов - текстовые и даты.
Сортировку и изменение текстовых полей получилось реализовать так: PHP код:
<table>
<thead>
<tr>
<th><?php echo sort_link_th('Ник', 'name_asc', 'name_desc'); ?></th>
<th><?php echo sort_link_th('Англ', 'eng_asc', 'eng_desc'); ?></th>
<th><?php echo sort_link_th('Яп', 'jp_asc', 'jp_desc'); ?></th>
<th><?php echo sort_link_th('Кор', 'kor_asc', 'kor_desc');?></th>
<th><?php echo sort_link_th('Кит', 'chi_asc', 'chi_desc');?></th>
<th><?php echo sort_link_th('Ред', 'red_asc', 'red_desc');?></th>
<th><?php echo sort_link_th('VK', 'vk_name_asc', 'vk_name_desc');?></th>
<th><?php echo sort_link_th('Почта', 'mail_asc', 'mail_desc');?></th>
</tr>
</thead>
<tbody>
<?php foreach ($list as $row => $user): ?>
<tr name="<?php echo $user['id']; ?>">
<td class="edit"><?php echo $user['name']; ?></td>
<td><?php echo $user['eng'] ? "✔" : "✖"; ?></td>
<td><?php echo $user['jp'] ? "✔" : "✖"; ?></td>
<td><?php echo $user['kor'] ? "✔" : "✖"; ?></td>
<td><?php echo $user['chi'] ? "✔" : "✖"; ?></td>
<td><?php echo $user['red'] ? "✔" : "✖"; ?></td>
<td><?php echo $user['vk_name']; ?></td>
<td class="edit"><?php echo $user['mail']; ?></td>
</tr>
<?php endforeach; ?>
$list - ответ с базы данных. Он просто разбирается. И ява код:
$(function () {
$(".edit").dblclick(function () {
newInput(this);
});
});
function closeInput(elm) {
var value = $(elm).find('input').val();
$(elm).empty().text(value);
var id = $(elm).parent().attr('name');
console.log(id)
$.ajax({
type: "POST",
url: "http://localhost/database/people_update_line.php",
data: {text: id, name: value},
success: function(response)
{
console.log(response)
}
});
$(elm).bind("dblclick", function () {
newInput(elm);
});
}
function newInput(elm) {
$(elm).unbind('dblclick');
var value = $(elm).text();
$(elm).empty();
$("<input>")
.attr('type', 'text').val(value)
.blur(function() {closeInput(elm);})
.appendTo($(elm))
.focus();
}
Подключить библиотеку/плагин на js не получилось. Буду благодарен помощи с этой темой. И прошу ткнуть меня носом в простой вариант. Заранее спасибо.
P.S.: Веб-приложение для личных целей, будет на локальном сервере Ampps. jQuery не знаю, но буду рад видеть, а вот бутстрап не хотелось бы, нравится самому стили писать
Источник: Stack Overflow на русском