Редактирование данных в таблице и отправка на сервер
Привет.
JS изучаю совсем недолго. Передо мной встала следующая задача: Есть на странице таблица, которая генерится с помощью JS, данные для таблицы приходят от сервера ввиде JSON. Эту подзадачу сделал.
<table id="edit">
<tbody>
<tr id="0">
<td>Бетмен</td>
<td>24</td>
<td>28/04/1989</td>
</tr>
</tbody>
</table>
Вторая подзадача. При клике на строку, все столбцы превращались в инпуты. После редактирования, данные отправлялись на сервер. При редактировании поля с датой нужно, чтобы выплывал виджет выбора даты. Ломаю голову уже два дня. Буду благодарен за любую помощь. |
Чет типа такого:
<!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,
в ие выдаёт ошибку 56 строка недопустимое значение попробовал заменить так
try {
input.type = cell.getAttribute('data-type');
} catch (e) {
input.type = 'text'
}
|
Поправил.
|
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? |
На момент выполнения скрипта таблицы не существует.
|
Цитата:
Цитата:
$(this).html(input_field); input_field.focus() или тут |
Цитата:
Цитата:
|
Цитата:
$('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();
});
|
Может через live('click', func) нужно?
Таблица появляется после щелчка по ссылке, откуда приходят данные в JSON. После уже с помощью .getJSON формируется таблица и в нее вставляются данные.
$(function() {
$('ul.f-nav-tabs a').bind('click', function(event) {
event.preventDefault(); // Чтобы браузер по ссылке не ходил
var url = $(this).attr('href');
$.getJSON(url, function(data) {
$('table#items').remove();
var html_table = '<table id="edit"></table>';
var tr = '<tr>';
$.each(data.fields, function(key, value) {
tr += '<th>' + value + '</th>';
});
tr += '</tr>';
var html_table = $(html_table).append(tr);
$.each(data.qsd, function(key, value) {
var tmp_val = value;
var tr = '<tr id="' + key + '">';
$.each(tmp_val, function(key, value) {
tr += '<td>' + value + '</td>';
});
tr += '</tr>';
html_table = $(html_table).append(tr);
});
$('section#contentPane').html(html_table);
});
$('section#formPane').load('/hd/' + url + '/add/');
});
});
|
Batman_1989,
ставьте клик на элемент выше того что загружается
$(elem).on('click', 'td', function(event) {})
|
Цитата:
Цитата:
Например:
$('<td/>', {text: value}).appendTo(tr)
Тоже самое с tr'ками. |
danik.js,
Имею похожую задачу: https://github.com/hhru/frontend-tes...ster/README.md Подскажите тезисно, как модифицировать ваш код, и что добавить, чтобы реализоваить добавление заметки с всплывающим окном в таблицу. При этом, по заданию: "сохранение календаря в localStorage". |
| Часовой пояс GMT +3, время: 22:27. |