Редактирование ячейки таблицы Javasript

Понадобилось мне редактировать страницу. Так как таблица у меня строится на основе библиотеки Datatables, то логично было применить для этой задачи, editor.datatables. Данным плагин насколько я понял предназначен для клиент-серверного взаимодействия, в моем случае никого не взаимодействия сервеом не было, стояла задача пропарсить таблицу и результат послать на веб-сервис в виде JSON массива.

Для этой задачи нашел простое и эффективное решение, посмотреть можете по ссылке.

На всякий случай продублирую код и у себя, может пригодится кому нибудь.

    //Редактируемое поле Заказ
    $(function()    {
        $('td.editable').click(function(e)   {
            //ловим элемент, по которому кликнули
            var t = e.target || e.srcElement;
            //получаем название тега
            var elm_name = t.tagName.toLowerCase();
            //если это инпут - ничего не делаем
            if(elm_name == 'input') {return false;}
            var val = $(this).html();
            var code = '<input type="text" id="edit" value="'+val+'" />';
            $(this).empty().append(code);
            $('#edit').focus();
            $('#edit').blur(function()  {
                var val = $(this).val();
                $(this).parent().empty().html(val);
            });
        });
    });

    //ловим событие нажатия клавиши
    $(window).keydown(function(event){
    if(event.keyCode == 13) {   //если это Enter
        $('#edit').blur();  //снимаем фокус с поля ввода
    }
});

2 комментария

  1. добрый день, очень благодарен за код! Долго искал! А тут так компактно и удобно! Но , никак не могу понять как добиться редактирования таблицы в бд. Не могли бы все таки скинуть исходники? Больше всего интересует uptade_cell.php.. Заранее огромное спасибо!!

    1. Проект писал, давно и в образовательных целях. Попробую отыскать исходники. Если найду напишу вам на мыло.

Добавить комментарий

Ваш e-mail не будет опубликован.

Яндекс.Метрика