Скрипту достаточно указать в разметке первую строку содержащую нужные элементы скрипт будет добавлять строки клонируя её. И не даст удалить последнюю строку.
<form method="post" action=""> <table> <thead> <tr> <th scope="col">Текстовое поле</th> <th scope="col">checkbox</th> <th scope="col">Элемент-список</th> <th scope="col">Радио-кнопка уровня таблицы</th> <th scope="col">Радио-кнопка уровня строки</th> <th scope="col"> </th> </tr> </thead> <tbody id="dynamic"> <!-- ЭТА СТРОКА БУДЕТ ШАБЛОНОМ ДЛЯ ВНОВЬ СОЗДАВАЕМЫХ //--> <tr> <td> <label> <input type="text" name="text" value="Значение 1"> </label> </td> <td> <label> <input type="checkbox" name="checkbox" value="Значение 1"> Some checkbox </label> </td> <td> <label> <select name="select"> <option value="value-1">value-1</option> <option value="value-2">value-2</option> <option value="value-3">value-3</option> </select> </label> </td> <td> <label> <input type="radio" name="glob-radio" class="glob"> THIS ROW </label> </td> <td> <label> <input type="radio" name="radio" value="no" checked> NO </label> <label> <input type="radio" name="radio" value="yes"> YES </label> </td> <td> <button type="button" class="add">+</button> <button type="button" class="del">-</button> </td> </tr> </tbody> </table> <input name="sub" type="submit" value="SEND" style="margin: 10px"> </form> <script src="dynamicTable.js"></script> <script> new DynamicTable( document.getElementById("dynamic") ); </script>
Кнопки, удаления/добавления строк в разметке строки должны иметь строго
определенные классы:
add - кнопка добавляющая строку
del - кнопка удаляющая строку
Кнопки могут располагаться в любой ячейке строки.
Радио-кнопки которые группируются в пределах одной ячейки определяются как обычно. Радио-кнопки которые группируются в пределах всей таблицы должны обязательно иметь класс glob
Array ( [0] => Array ( [text] => Значение 1 [checkbox] => Значение 1 [select] => value-1 [radio] => yes ) ... , [glob-radio] => 2 // Ключ элемента, представл. строку, где была выбрана глобальная радио-кнопка [3] => Array ( [text] => Значение 3 [checkbox] => Значение 1 [select] => value-3 [radio] => no ) [sub] => SEND )
Внимание! Индексы массива ни в коей мере не отражают порядка строк, они всего лишь служат для уникальной идентификации строк в существующем наборе данных. Порядковые номера строк таблицы на сервере определить не возможно! Массив может содержать как числовые индексы, так и строковые. Причем числовые индексы это элементы (подмассивы), представляющие строки таблицы, с соответствующими данными, а не числовые индексы это другие элементы уровня таблицы. Радио-кнопки уровня таблицы (те что имеют класс glob) будут представлены как корневые элементы массива, а радио-кнопки уровня ячеек будут представлены как элементы подмассивов наряду с остальными элементами.
<?php if (!empty($_POST)) : ?> <?php $i = 1; ?> <dl> <?php foreach ($_POST as $key => $value) : if (gettype($key) === "integer") : ?> <dt>Строка № <?php echo $i++ ?> : </dt> <dd> <strong>Текстовое поле : </strong><?php echo $value['text'] ?><br /> <strong>Select:</strong> <?php echo $value['select'] ?><br /> <strong>Radio:</strong> <?php echo $value['radio'] ?><br /> <?php if (isset($value['checkbox'])) : ?> <strong>Checkbox: </strong><?php echo $value['checkbox'] ?><br /> <?php endif ?> <?php if ($_POST['glob-radio'] == $key) : ?> <strong>Global radio: </strong>CHECKED<br /> <?php endif ?> <br /> </dd> <?php endif ?> <?php endforeach ?> </dl> <?php endif ?>