Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.03.2014, 18:04
Новичок на форуме
Отправить личное сообщение для Batman_1989 Посмотреть профиль Найти все сообщения от Batman_1989
 
Регистрация: 17.03.2014
Сообщений: 3

Редактирование данных в таблице и отправка на сервер
Привет.
JS изучаю совсем недолго.

Передо мной встала следующая задача:
Есть на странице таблица, которая генерится с помощью JS, данные для таблицы приходят от сервера ввиде JSON. Эту подзадачу сделал.

<table id="edit">
    <tbody>
        <tr id="0">
            <td>Бетмен</td>
            <td>24</td>
            <td>28/04/1989</td>
        </tr>
    </tbody>
</table>


Вторая подзадача. При клике на строку, все столбцы превращались в инпуты. После редактирования, данные отправлялись на сервер. При редактировании поля с датой нужно, чтобы выплывал виджет выбора даты.

Ломаю голову уже два дня. Буду благодарен за любую помощь.
Ответить с цитированием
  #2 (permalink)  
Старый 18.03.2014, 00:08
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Чет типа такого:
<!DOCTYPE html>
<meta charset="utf-8" />
<style>
	table, td{
		border: 1px solid #ccc;
		border-collapse: collapse;
		table-layout: fixed;
		border-spacing: 0;
	}
	td{
		padding: 4px;
	}
	td input{
		width: 100%;
		padding: 4px;
		margin: 0;
		border: none;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		font: inherit;
		height: 28px;
	}
	td input:focus{
		outline: 1px solid blue;
	}
	.editable td{
		padding: 0;
	}
	#edit{
		width: 400px;
	}
</style>
<table id="edit">
    <tbody>
        <tr id="0">
            <td data-type="text">Бетмен</td>
            <td data-type="number">24</td>
            <td data-type="date">1989-04-28</td>
        </tr>
    </tbody>
</table>
<script>
(function(){
    var table = document.getElementById('edit');
    for (var i = 0; i < table.tBodies[0].rows.length; i++) {
        var row = table.tBodies[0].rows[i];
        row.onclick = onRowClick;
    }
    function onRowClick(event) {
        var target = event ? event.target : window.event.srcElement;
        this.onclick = null;
        this.className = 'editable';
        for (var i = 0; i < this.cells.length; i++) {
            var cell = this.cells[i];
            var input = document.createElement('input');
            // IE fails to change "type" property to unsupported value
            input.setAttribute('type', cell.getAttribute('data-type') || 'text');
            input.value = cell.firstChild.data;
            cell.replaceChild(input, cell.firstChild);
            if (cell == target)
                input.focus();
        }
    }
})();
</script>

Поля ввода даты и числа поддерживаются только в новых браузерах. Также не уверен по формату даты. Ловишь событие blur инпута - это значит он потерял фокус, то есть редактирование закончилось и можно отсылать данные.
__________________
В личку только с интересными предложениями

Последний раз редактировалось danik.js, 18.03.2014 в 14:43.
Ответить с цитированием
  #3 (permalink)  
Старый 18.03.2014, 08:28
Интересующийся
Отправить личное сообщение для Ilya_Nsk Посмотреть профиль Найти все сообщения от Ilya_Nsk
 
Регистрация: 07.02.2014
Сообщений: 11

это реально не слабо!! респект и кармирование
Ответить с цитированием
  #4 (permalink)  
Старый 18.03.2014, 10:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,277

danik.js,
в ие выдаёт ошибку 56 строка недопустимое значение
попробовал заменить так
try {
                input.type = cell.getAttribute('data-type');
            } catch (e) {
                input.type = 'text'
            }
Ответить с цитированием
  #5 (permalink)  
Старый 18.03.2014, 14:43
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Поправил.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #6 (permalink)  
Старый 19.03.2014, 13:59
Новичок на форуме
Отправить личное сообщение для Batman_1989 Посмотреть профиль Найти все сообщения от Batman_1989
 
Регистрация: 17.03.2014
Сообщений: 3

2 danik.js, спасибо.
Немного перепутал. Я использую не чистый JS, а jQuery.
Вот мой набросок, но почему-то не работает. При клике на ячейку ничего не происходит.

$(function() {
    $('td').click(function()    {
        var td_val = $(this).html();
        var input_field = '<input type="text" id="edit" value="' + td_val + '" />';
        $(this).empty().append(input_field);
        $('#edit').focus();
    });
});


Может не работает из-за того, что таблица формируется динамически с помощью jQuery и загружается в <section> через ajax?
Ответить с цитированием
  #7 (permalink)  
Старый 19.03.2014, 14:34
Аватар для Erolast
Профессор
Отправить личное сообщение для Erolast Посмотреть профиль Найти все сообщения от Erolast
 
Регистрация: 24.09.2013
Сообщений: 1,436

На момент выполнения скрипта таблицы не существует.
Ответить с цитированием
  #8 (permalink)  
Старый 19.03.2014, 14:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,277

Сообщение от Erolast
На момент выполнения скрипта таблицы не существует.
а это
Сообщение от Batman_1989
$(function() {
Batman_1989,
$(this).html(input_field);
input_field.focus()

или тут
Ответить с цитированием
  #9 (permalink)  
Старый 19.03.2014, 14:52
Аватар для Erolast
Профессор
Отправить личное сообщение для Erolast Посмотреть профиль Найти все сообщения от Erolast
 
Регистрация: 24.09.2013
Сообщений: 1,436

Сообщение от рони Посмотреть сообщение
а это
На момент загрузки DOM таблицы еще нету
Сообщение от Batman_1989
таблица формируется динамически с помощью jQuery и загружается в <section> через ajax
Ответить с цитированием
  #10 (permalink)  
Старый 19.03.2014, 14:59
Аватар для Erolast
Профессор
Отправить личное сообщение для Erolast Посмотреть профиль Найти все сообщения от Erolast
 
Регистрация: 24.09.2013
Сообщений: 1,436

Цитата:
$(this).html(input_field);
input_field.focus()
В input_field же у Batman_1989'а строка хранится, а не jQuery объект. Тогда уж надо и назначение input_field менять, в итоге получится

$('td').click(function()    {
        var td_val = $(this).html();
        var input_field = $('<input type="text" id="edit" value="' + td_val + '" />');
        $(this).html(input_field);
        $(input).focus();
    });
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
AJAX. редактирование данных в таблице MySQL B1ackgh0st AJAX и COMET 1 09.01.2014 02:03
Простейшая отправка данных на сервер и вывод MBmusic AJAX и COMET 12 23.09.2013 11:35
отправка всех данных store на сервер shepard90 ExtJS 1 03.04.2013 22:52
Перезагрузка страницы и отправка данных на сервер boichukvd AJAX и COMET 5 25.03.2013 13:07
Двойная Фильтрация данных таблицы David0707 Общие вопросы Javascript 0 19.03.2012 11:00