как ajax опубликовать форму, содержащую поля в динамической таблице, для которых можно динамически добавлять строки и столбцы

Question

В каждой ячейке есть поле, текстовый ввод, переключатели или выбор.

Я вынужден называть поля таким образом, чтобы имена включали индексы строк и столбцов?как "data [row] [col]"?Немного хлопотно создавать эти имена полей при добавлении строк или столбцов в таблицу.

Может ли здесь использоваться магия jQuery?

Answer 1

Конечно, можно использовать магию jquery! просто назовите ваши ячейки, какие они есть, и включите скрытое поле с идентификатором, например:

<tr>
    <td class="firstname"><input /></td>
    <td class="lastname"><input /></td>
    <td class="address"><input /></td>
    <td class="phone"><input /></td>
    ... 
    <td class="whatever">
        <input />
        <input type="hidden" class="itemId" value="[the id]" />
    </td>
</tr>

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

var row = $('tr').find('.itemId[value=' + id + ']');
// if you're in an event handler: 
var id = $(this).parents('tr').find('.itemId').val(); //gets you the id you want

Теперь вы можете делать такие вещи, как:

var firstname = row.find('.firstname :input').val(); //etc..

скомпилируйте их в объект JSON:

var data = {"itemId": id, "firstname": firstname, "lastname": lastname, ...etc };

и отправьте через $.post(), $.ajax() или $.get(). Легко!

Answer 2

Конечно, можно посмотреть здесь:

// This assumes that you've wrapped the form #myform around the input
$('#myform').submit(function() {
    $('#mytable tr').each(function(n, elem) {
        $('td', elem).each(function(m) {
            $('input:text, input:radio, textarea, select')
                .attr('name', 'data['+n+']['+m+']');
        });
    });

    // Do some validation or just let it submit :D
});

Вот, пожалуйста!

Answer 3

Скажем, у вас есть таблица с y столбцами и x строками.Вы можете просто извлечь данные ячейки из каждого, используя селекторы nth-child и gt.Например, чтобы выбрать ячейки первого столбца (исключая ячейку «заголовка»), вы можете сделать:.map:

var values = $("#tableId td:gt(0):nth-child(1) :input").map(function() {
    return this.value;
}).get();
alert(values);

Демонстрация: http://jsfiddle.net/Nunhk/3/