Динамическая таблица.

Выполнение задачи Название задачи Важность для Заказчика Блокер или можно обойти Экономический эффект Как часто
Трудоемкость задачи На кого влияет
Влияние на KPI КП "Онбординг" Рейтинг задачи Добавить или убрать задачу  
 

Подключение:

Скрипту достаточно указать в разметке первую строку содержащую нужные элементы скрипт будет добавлять строки клонируя её. И не даст удалить последнюю строку.

<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">&nbsp;</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 ?>