Редактирование данных в таблице и отправка на сервер
Привет.
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();
});
|
| Часовой пояс GMT +3, время: 04:30. |