Динамически редактируемая html таблица
Доброго времени суток, форумчане!
Проблема в том, что возникла задача в реализации динамической таблицы на сайте. Дабы не париться с подключаемыми pear и прочими библиотеками было решено сделать это всё на php, html, js Привожу кусочек кода:
$(function () {
$('td#editable').click(function(e) {
var t = e.target || e.srcElement;
var elm_name = t.tagName.toLowerCase();
if(elm_name == 'input') {return false;}
var val = $(this).html();
var code = '<input type="text" name="ids" id="edit" size=5px value="'+val+'"/>';
var name = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17];
for (var name in val) {
var val=name[name];
};
$(this).empty().append(code);
$('#edit').focus();
$('#edit').blur(function() {
var val = $(this).val();
$(this).parent().empty().html(val);
});
});
$(window).keydown(function(event){
if(event.keyCode == 13) {
$('#edit').blur();
}
});
});
Но сама задача такова - сделать это для каждого элемента статичной таблицы с возможностью записи в переменные php для записи в базу данных знаний ajax и js всего-ничего, прошу вашей помощи :с |
просто кусочек говнокода, пытался реализовать это через массивы.
|
Если таблица не слишком большая - зачем париться с динамическими временными инпутами? Тем более если данные надо будет отправлять на сервер - инпуты сделают все за тебя.
|
прошу прощения, я не ясно разъяснил свою задачу
с таблицей проблем нет. просто, проблема в том, чтобы мне надо отследить каждую редактируемую область и записать её в переменную php для дальнейших операций. грубо говоря, просто живые таблицы с отслеживанием переменных. я не могу отследить значение каждого поля |
извиняюсь, вот:
<table align="center" cellpadding="15" width="700" height="400"> <tr> <td>Количество детей:</td><td id="editable"></td><td> <input type="text" name="field2" value="'.$field2.'" /> </td> </tr> <tr> <td>Количество сирот:</td><td> <input type="text" name="field3" value="'.$field3.'" /> </td><td> <input type="text" name="field4" value="'.$field4.'" /> </td> </tr> <tr> <td>Прочие льготные квоты:</td><td> <input type="text" name="field5" value="'.$field5.'" /> </td><td> <input type="text" name="field6" value="'.$field6.'" /> </td> </tr> <tr> <td>Квартал:</td><td> <input type="text" name="field7" value="'.$field7.'" /> </td><td> <input type="text" name="field8" value="'.$field8.'" /> </td> </tr> </table> <br><br> <center> <input type="submit" name="ready" id="ready" /></center> до этого работал с переменными php напрямую через инпуты, сейчас возникла задача в нарисовании красивых редактируемых полей спасибо за отклик! |
нет, не заполнены
изначально они пустые, а я использовал костыльный метод - всю таблицу в переменную php вгонял, к примеру $r = ' <...> ' ; оттуда и названия переменных fields а мне бы отследить передаваемые значения из переменных инпутов, а я не знаю как, т.к. передаваемые значения мне неизвестны. кстати, извините, забыл упомянуть, работает с динамическим инпутом лишь первая ячейка <td>Количество детей:</td><td id="editable"></td> мне кажется, нужно добавить инкрементируемое значение в name, чтобы можно было хоть как-то отслеживать, но сделать этого я не смог ну, и на этой же форме было бы хорошо делать запись из js переменных в переменные php, так как знаний js не хватает :( |
вот и проблема в том, я не могу отследить названия инпутов
просто, я не знаю, как я смогу получить данные если бы я имел представление, как получить имя каждого динамического инпута, я бы сделал оттуда же и запись в переменную |
<table id="table">
<tr>
<td><input name="input[0][0]" /></td>
<td><input name="input[0][1]" /></td>
</tr>
<tr>
<td><input name="input[1][0]" /></td>
<td><input name="input[1][1]" /></td>
</tr>
</table>
<script>
var table = document.getElementById('table');
table.addEventListener('change', function(event) {
var input = event.target;
alert(input.name + '=' + input.value);
});
</script>
|
Далее XHR'ом засылаешь на сервак для записи:
var request = new XMLHttpRequest();
request.open('POST', 'table.php');
request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
request.send(input.name + '=' + input.value);
На сервер придет ассоциативный массив (вроде бы) $_POST['input'] - первый ключ - строка, второй - ячейка. Ключи могут быть не числовыми. |
спасибо огромное! сейчас приступлю к внедрению :)
|
| Часовой пояс GMT +3, время: 04:29. |