Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 25.06.2020, 16:05
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,355

savsoft, вас куда-то занесло, не в ту степь. Поля ввода никоим образом не определяют метод обмена данными с сервером, это чисто ваша прихоть - как захочется, так и будет.

Вас никто не заставляет отправлять форму, в примере ее и нет, ибо в данном случае отправление только измененных полей, что браузер сам не определит. Поэтому при активации отправления такие поля и собирает js-сценарий в объект, который и отправляется на сервер так, как вам хочется.

Что тут не понятного и в чем проблема? Вам же нужны поля, а не ... Что вы уперлись в таблицу, не только ее ячейкам можно задать стили, другие html-элементы также "имеют на это право", зачем вам посредники, которые в конечном итоге просто усложняют работу JS?
Ответить с цитированием
  #12 (permalink)  
Старый 25.06.2020, 17:56
Аспирант
Отправить личное сообщение для savsoft Посмотреть профиль Найти все сообщения от savsoft
 
Регистрация: 03.01.2019
Сообщений: 71

Понял, спасибо
Ответить с цитированием
  #13 (permalink)  
Старый 25.06.2020, 18:01
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,355

Только если делать так как в примере, то так как изменено в нем:

this.classList.toggle('change', this.dataset.val != this.value.trim())

и это обязательно, так как добавление пробела в конце, это будет воспринято как изменение, хотя фактического изменения значения не будет.

А полям ввода можно через стили удалить бордюры, растянуть их на всю ячейку таблицы, они и будут восприниматься как ее ячейки.

Главное связать имена полей с конкретными записями в базе.

Последний раз редактировалось laimas, 25.06.2020 в 18:09.
Ответить с цитированием
  #14 (permalink)  
Старый 25.06.2020, 22:01
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,368

<style>
    td[contenteditable=true] {
        background: aqua;
    }
</style>
<table border="1" align="center" cellpadding="4" cellspacing="0">
    <tr>
        <th>#</th>
        <th>Имя</th>
        <th>Фамилия</th>
        <th>Опции</th>
    </tr>
    <tbody>
    <tr>
        <td data-field="id">1</td>
        <td class="data" data-field="name">Иван</td>
        <td class="data" data-field="family">Петров</td>
        <td class="options">
            <a class="edit" href="#">Edit</a>
            <a class="save" href="#" style="display: none">Save</a>
            <a class="cancel" href="#" style="display: none">Cancel</a>
        </td>
    </tr>
    <tr>
        <td data-field="id">2</td>
        <td class="data" data-field="name">Александр</td>
        <td class="data" data-field="family">Сидоров</td>
        <td class="options">
            <a class="edit" href="#">Edit</a>
            <a class="save" href="#" style="display: none">Save</a>
            <a class="cancel" href="#" style="display: none">Cancel</a>
        </td>
    </tr>
    </tbody>
</table>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
        integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
        crossorigin="anonymous"></script>
<script>
    jQuery(document).ready(function ($) {
        $('.options').on('click', 'a', function (e) {
            e.preventDefault();
            var $tr = $(this).parents('tr');
            var $edit = $tr.find('.data');
            function showEdit() {
                $tr.find('a').hide();
                $tr.find('a.edit').show();
                $edit.attr('contenteditable', 'false');
            }
            switch (e.target.className) {
                case 'edit':
                    $edit.attr('contenteditable', 'true');
                    $(this).hide().siblings().show();
                    break;
                case 'save':
                    var data = {};
                    $tr.find('[data-field]').each(function (_, v) {
                        data[$(v).data('field')] = $(v).text();
                    });
                    console.log(data);
                    /*$.post('index.php', data, function (res) {
                        if (res) {
                            $edit.attr('contenteditable', 'false');
                        }
                    }, 'json').fail(function (error) {
                        alert(error.statusText)
                    });*/
                    showEdit();;
                    break;
                case 'cancel':
                    showEdit();
                    break;
            }
        });
    });
</script>

Вариант с contenteditable
Ответить с цитированием
  #15 (permalink)  
Старый 25.06.2020, 22:08
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,355

Офигеть, а зачем, ради понтов или ?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Фильтр данных в таблице при заданном условии denis_kontarev jQuery 15 01.04.2018 13:36
ajax. Изменение базы данных запросом со страницы ASol AJAX и COMET 5 10.04.2013 12:03
Двойная Фильтрация данных таблицы David0707 Общие вопросы Javascript 0 19.03.2012 11:00
Изменение окраски строк таблицы, исходя из данных? Space-06 Events/DOM/Window 4 14.02.2012 19:32
Изменение цвета ячейки в таблице, при наведении на строку другой таблицы Psychosonic Общие вопросы Javascript 12 24.11.2010 15:44