Как я могу взять эти табличные данные и правильно сгруппировать поля?

0

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

[0] -> drum - value
[0] -> size - value
[1] -> drum - value
[1] -> size - value

Вот таблица, как у меня сейчас. Большое вам спасибо за вашу помощь, я очень ценю это!

<table id="drumInformation">
        <tr>
            <th colspan="9"><p>D R U M I N F O R M A T I O N – Drum Number(s) / Liter(s) or Gallon(s) Used</p>

                <p> If some or all of your drum numbers fall in consecutive order, please feel free to use the
                    "series" method shown below to avoid typing each drum number individually and to save you valuable time.</p>

                <p>Example:<br/>
                    10001, 10002, 10003, 10004, 10005, 10006 or 10001 - 10006</p>
            </th>
        </tr>
        <tr class="labelRow">
            <td class="label">
                <label>Drum No.</label>
            </td>
            <td class="label">
                <label><span class="euro">Liters</span><span class="domestic">Gallons</span></label>
            </td>
            <td class="label">
                <label>Drum No.</label>
            </td>
            <td class="label">
                <label><span class="euro">Liters</span><span class="domestic">Gallons</span></label>
            </td>
            <td class="label">
                <label>Drum No.</label>
            </td>
            <td class="label">
                <label><span class="euro">Liters</span><span class="domestic">Gallons</span></label>
            </td>
            <td class="label">
                <label>Drum No.</label>
            </td>
            <td class="label">
                <label><span class="euro">Liters</span><span class="domestic">Gallons</span></label>
            </td>
        </tr>
        <tr>
            <td>
                <input name="row[][drumNumber][]">
            </td>
            <td>
                <input name="row[][gallons][]">
            </td>
            <td>
                <input name="row[][drumNumber][]">
            </td>
            <td>
                <input name="row[][gallons][]">
            </td>
            <td>
                <input name="row[][drumNumber][]">
            </td>
            <td>
                <input name="row[][gallons][]">
            </td>
            <td>
                <input name="row[][drumNumber][]">
            </td>
            <td>
                <input name="row[][gallons][]">
            </td>
            <td class="remove"></td>
        </tr>
        <tr>
            <td>
                <input name="row[][drumNumber][]">
            </td>
            <td>
                <input name="row[][gallons][]">
            </td>
            <td>
                <input name="row[][drumNumber][]">
            </td>
            <td>
                <input name="row[][gallons][]">
            </td>
            <td>
                <input name="row[][drumNumber][]">
            </td>
            <td>
                <input name="row[][gallons][]">
            </td>
            <td>
                <input name="row[][drumNumber][]">
            </td>
            <td>
                <input name="row[][gallons][]">
            </td>
            <td class="remove"></td>
        </tr>
        <tr>
            <td>
                <input name="row[][drumNumber][]">
            </td>
            <td>
                <input name="row[][gallons][]">
            </td>
            <td>
                <input name="row[][drumNumber][]">
            </td>
            <td>
                <input name="row[][gallons][]">
            </td>
            <td>
                <input name="row[][drumNumber][]">
            </td>
            <td>
                <input name="row[][gallons][]">
            </td>
            <td>
                <input name="row[][drumNumber][]">
            </td>
            <td>
                <input name="row[][gallons][]">
            </td>
            <td class="remove"></td>
        </tr>
        <tr>
            <td>
                <input name="row[][drumNumber][]">
            </td>
            <td>
                <input name="row[][gallons][]">
            </td>
            <td>
                <input name="row[][drumNumber][]">
            </td>
            <td>
                <input name="row[][gallons][]">
            </td>
            <td>
                <input name="row[][drumNumber][]">
            </td>
            <td>
                <input name="row[][gallons][]">
            </td>
            <td>
                <input name="row[][drumNumber][]">
            </td>
            <td>
                <input name="row[][gallons][]">
            </td>
            <td class="remove"></td>
        </tr>
        <tr>
            <td>
                <input name="row[][drumNumber][]">
            </td>
            <td>
                <input name="row[][gallons][]">
            </td>
            <td>
                <input name="row[][drumNumber][]">
            </td>
            <td>
                <input name="row[][gallons][]">
            </td>
            <td>
                <input name="row[][drumNumber][]">
            </td>
            <td>
                <input name="row[][gallons][]">
            </td>
            <td>
                <input name="row[][drumNumber][]">
            </td>
            <td>
                <input name="row[][gallons][]">
            </td>
            <td class="remove"><img src="/forms/assets/img/Plus-32.png" class="addRow"></td>
        </tr>

    </table>
  • 0
    Почему бы не поставить номер массива в имени? Это может быть увеличено и уменьшено с помощью JavaScript.
Теги:
arrays
forms
input

1 ответ

0
Лучший ответ

Я нашел решение, которое работает с изменением строки таблицы, чтобы выглядеть так:

    <tr>
        <td>
            <input name="group[8][drumNumber]">
        </td>
        <td>
            <input name="group[8][gallons]">
        </td>
        <td>
            <input name="group[9][drumNumber]">
        </td>
        <td>
            <input name="group[9][gallons]">
        </td>
        <td>
            <input name="group[10][drumNumber]">
        </td>
        <td>
            <input name="group[10][gallons]">
        </td>
        <td>
            <input name="group[11][drumNumber]">
        </td>
        <td>
            <input name="group[11][gallons]">
        </td>
        <td class="remove"></td>
    </tr>

Там может быть более чистое решение, но это работает. Я не знаю, почему я застрял в том, чтобы поставить строку [] на фронт.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню