Динамическая редактируемая таблица

Рейтинг: 0Ответов: 0Опубликовано: 29.05.2023

товарищи. Возможно вопрос странный и ранее задавался, но я человек незнающий, прошу вашей помощи. Задача передо мной следующая: вывести на страницу таблицу. Двойное нажатие должно давать возможность редактировать помеченные классом ячейки двух возможных типов - текстовые и даты.

Сортировку и изменение текстовых полей получилось реализовать так: 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'] ? "&#10004" : "&#10006"; ?></td>
            <td><?php echo $user['jp'] ? "&#10004" : "&#10006"; ?></td>
            <td><?php echo $user['kor'] ? "&#10004" : "&#10006"; ?></td>
            <td><?php echo $user['chi'] ? "&#10004" : "&#10006"; ?></td>
            <td><?php echo $user['red'] ? "&#10004" : "&#10006"; ?></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 не знаю, но буду рад видеть, а вот бутстрап не хотелось бы, нравится самому стили писать

Ответы

Ответов пока нет.