Добавление строки таблицы нажатием кнопки

access_time 2020-05-07 20:08:58

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

По нажатию на кнопку добавить, в конец таблицы, но перед кнопкой, должна добавиться ещё одна строка с инпутами. Для решения этой задачи я видел много всяких трюков, но как мне показалось, самое элегантное решение реализуется с помощью битриксовой js библиотеки BX. Хотя безусловно эту задачу можно решить многими способами, например с помощью JQuery.

Решение задачи:

<script>
        function settingsAddRow(a)
        {
            var row = BX.findParent(a, { 'tag': 'tr'});
            var tbl = row.parentNode;

            var tableRow = tbl.rows[row.rowIndex-1].cloneNode(true);
            tbl.insertBefore(tableRow, row);
        }
</script>
<table>
                <tr>
                    <td style="width: 100px;">
                        <input type="text" value="10">
                    </td>
                    <td style="width: 100px;">
                        <input type="text" value="200">
                    </td>
                    <td style="width: 100px;">
                        <input type="text" value="10">
                    </td>
                    <td style="width: 100px;">
                        <input type="text" value="30">
                    </td>
                </tr>
                <tr>
                    <td colspan="4">
                        <a href="javascript:void(0)" onclick="settingsAddRow(this)" hidefocus="true" class="adm-btn">Добавить</a>
                    </td>
                </tr>
            </table>

 Тут все предельно просто и понятно! А если остались вопросы - пишите комментарии.

Оставить комментарий

Комментарии:

{{ item.user_name }}
access_time 2018-11-01 20:15:22

{{ item.text }}