Форум

Batman_1989 · #1 (**permalink**) 17.03.2014, 20:04

Привет.
JS изучаю совсем недолго.

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

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

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

Ломаю голову уже два дня. Буду благодарен за любую помощь.

danik.js · #2 (**permalink**) 18.03.2014, 02:08

Чет типа такого:

<!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 инпута - это значит он потерял фокус, то есть редактирование закончилось и можно отсылать данные.

Ilya_Nsk · #3 (**permalink**) 18.03.2014, 10:28

это реально не слабо!! респект и кармирование

рони · #4 (**permalink**) 18.03.2014, 12:18

danik.js,
в ие выдаёт ошибку 56 строка недопустимое значение
попробовал заменить так

try {
                input.type = cell.getAttribute('data-type');
            } catch (e) {
                input.type = 'text'
            }

danik.js · #5 (**permalink**) 18.03.2014, 16:43

Поправил.

Batman_1989 · #6 (**permalink**) 19.03.2014, 15:59

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?

Erolast · #7 (**permalink**) 19.03.2014, 16:34

На момент выполнения скрипта таблицы не существует.

рони · #8 (**permalink**) 19.03.2014, 16:47

Сообщение от Erolast

На момент выполнения скрипта таблицы не существует.

а это

Сообщение от Batman_1989

$(function() {

Batman_1989,

$(this).html(input_field);
input_field.focus()

или тут

Erolast · #9 (**permalink**) 19.03.2014, 16:52

Сообщение от рони

а это

На момент загрузки DOM таблицы еще нету

Сообщение от Batman_1989

таблица формируется динамически с помощью jQuery и загружается в <section> через ajax

Erolast · #10 (**permalink**) 19.03.2014, 16:59

Цитата:

$(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();
    });

Форум

Справочник

Discord чат

Курсы javascript