HTML: таблица форм?

Мне часто хочется создать таблицу форм - набор строк, каждая строка представляет собой отдельную форму со своими полями и кнопкой отправки. Например, вот пример приложения для зоомагазина - представьте, что это экран оформления заказа, который дает вам возможность обновить количество и атрибуты выбранных вами питомцев и сохранить изменения перед выпиской:

Pet    Quantity Color Variety   Update
snake         4 black rattle    update
puppy         3 pink  dalmatian update

Я хотел бы иметь возможность сделать это с помощью HTML, который выглядит следующим образом:

<table> 
<thead><tr><th>Pet</th> <th>Quantity</th> <th>Color</th> <th>Variety</th> <th>Update</th></tr></thead>
<tbody>
     <tr>
          <form>
            <td>snake<input type="hidden" name="cartitem" value="55"></td>
            <td><input name="count" value=4/></td>
            <td><select name="color"></select></td>
            <td><select name="variety"></select></td>
            <td><input type="submit"></td>
          </form>
     </tr>
</tbody>
</table>

Это в основном таблица, полная форм, одна форма на строку. Однократное нажатие кнопки update позволяет обновить конкретную строку (это не реальный пример, мои настоящие приложения действительно требуют независимости строк).

Но это не правильный HTML. Согласно спецификации, <form> должен быть либо полностью внутри <td> или полностью вне <table>, Этот недействительный html нарушает работу библиотек JavaScript и является огромной болью для решения.

В итоге я создал одну таблицу, содержащую заголовки столбцов, а затем создал одну таблицу для каждой формы. Но это требует фиксированной ширины столбца, чтобы входы были выстроены в аккуратные столбцы, что является подпарам. Как вы решаете эту проблему? Есть ли очевидное простое решение, которое мне не хватает? Как мне составить таблицу форм?

Источник

2 ответа

Решение

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

    <form>
      <table>
        <!-- rows... -->
      </table>
      <p><input type="submit" value="Update quantity"></p>
    </form>

Скажем, у вас есть змея продукта с идентификатором 6. Затем вы называете вход для поля количества количества этого элемента [6].

Я не знаю, какой язык на стороне сервера вы используете, но в PHP вы можете перебирать количества и обновлять их на основе идентификатора. Вы получите массив, как это:

$_POST['quantity'] = array(
    '6' => 4
)
Источник

Вы можете использовать css, чтобы назначить разметку таблицы другим элементам.

.table { display: table; } 
.table>* { display: table-row; }
.table>*>* { display: table-cell; }

Затем вы используете следующий действительный HTML.

<div class="table"> 
    <form>
        <div>snake<input type="hidden" name="cartitem" value="55"></div>
        <div><input name="count" value=4/></div>
    </form>
</div>
Источник
Другие вопросы по тегам