Динамически редактируемая html таблица

[Krio]

вот и проблема в том, я не могу отследить названия инпутов

просто, я не знаю, как я смогу получить данные

если бы я имел представление, как получить имя каждого динамического инпута, я бы сделал оттуда же и запись в переменную

[danik.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>

[danik.js]

Далее 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'] - первый ключ - строка, второй - ячейка. Ключи могут быть не числовыми.

[Krio]

спасибо огромное! сейчас приступлю к внедрению

[Krio]

в прочем, проблема вот в чем:
все таки динамический инпут для красоты таблицы необходимо сделать.

как в моем приведенном выше коде, можно прописать значение name со значением +1?

по-сути, в таблице нету инпутов, но код реагирует на клик ячейки, тут и создается динамический инпут с неизвестным именем :о

[danik.js]

Krio, если таблица небольшая, то дин. инпуты не обязательны - уже ведь говорил об этом.
Что касается красоты - то css тебе в помощь:

<style>
#table{
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}
#table, #table td{
    border: 1px solid #33C;
    padding: 0;
}
#table input{
    width: 100%;
    box-sizing: border-box;
    border: none;
    background: #F9F9F9;
}
#table input:focus{
    outline: 1px solid red;
    background: #fff;
}
</style>
<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>

[Krio]

огромное спасибо!
лишь сейчас дошла суть