html таблица / форма в массив

user99 · 21 Апр 2020

Подскажите пожалуйста, по реализации таблицы / формы и при нажатии кнопки ее преобразованию в массив.

Наименование | Количество | Единица измерения | Стоимость
Тест | 7 | усл. | 12000
Тест 2 | 100 | шт. | 5.50
Тест 3 | 10 | м. | 550

Кнопка добавить строку (добавляет строку для ввода наименования, количество, единица измерения, стоимость) и отправить, после нажатия отправить хочу сформировать массив вида:

$prods = array(
array(
'name' => 'Тест',
'count' => 7,
'unit' => 'усл.',
'price' => 12000,
'nds' => 20,
),
array(
'name' => 'Тест 2',
'count' => 100,
'unit' => 'шт.',
'price' => 5.50,
'nds' => 20,
),
array(
'name' => 'Тест 3',
'count' => 10,
'unit' => 'м',
'price' => 550,
'nds' => 20,
),
);

Спасибо!

Denzy · 21 Апр 2020

Записываете строку "Тест | 7 | усл. | 12000" в переменную $paramst и юзаем explode(), для разбивки

PHP:

<?php
$paramstr = "Тест | 7 | усл. | 12000";
$paramarr = explode("|", $paramstr);
echo $paramarr[0]; // Тест
echo $paramarr[1]; // 7
echo $paramarrs[2]; // усл.
echo $paramarr[3]; //12000
?>

user99 · 21 Апр 2020

Если у меня их например 10 таких строк?
С HTML в любом виде можно их передать в php.

Как раз нет понимания как это сделать (сформировать эти строки в браузере для заполнения ) и в каком виде удобнее передать для формирования массива в конечном результате.

garphild · 21 Апр 2020

user99 написал(а):
Если у меня их например 10 таких строк?
С HTML в любом виде можно их передать в php.

Как раз нет понимания как это сделать (сформировать эти строки в браузере для заполнения ) и в каком виде удобнее передать для формирования массива в конечном результате.

Храните их в переменной яваскрипта в виде двумерного массива. А если нужно отдать на сервер, то используйте, например, JSON.stringify на строне клиента json_decode на php. JSON вполне сложившийся формат для передачи данных.
Если к реализации получения данных доступа нет, то берите jQuery и прогуляйтесь по самой таблице по строкам и ячейкам с использованием .each()

user99 · 21 Апр 2020

Если не сложно, можно мини пример, пожалуйста.

Update.

Немножко перефразирую вопрос, как сделать таблицу 1 строка 2 столбца и кнопка "Добавить строку", соответственно строк может быть 1 может быть 2,3,4 и т.д.

После заполнения информации в таблице она отправляется в виде массива:

$prods = array(
array(
'name' => 'Тест',
'count' => 7,
'unit' => 'усл.',
'price' => 12000,
'nds' => 20,
),
array(
'name' => 'Тест 2',
'count' => 100,
'unit' => 'шт.',
'price' => 5.50,
'nds' => 20,
),
array(
'name' => 'Тест 3',
'count' => 10,
'unit' => 'м',
'price' => 550,
'nds' => 20,
),
);

garphild · 22 Апр 2020

user99 написал(а):
Если не сложно, можно мини пример, пожалуйста.

Update.

Немножко перефразирую вопрос, как сделать таблицу 1 строка 2 столбца и кнопка "Добавить строку", соответственно строк может быть 1 может быть 2,3,4 и т.д.

После заполнения информации в таблице она отправляется в виде массива:

$prods = array(
array(
'name' => 'Тест',
'count' => 7,
'unit' => 'усл.',
'price' => 12000,
'nds' => 20,
),
array(
'name' => 'Тест 2',
'count' => 100,
'unit' => 'шт.',
'price' => 5.50,
'nds' => 20,
),
array(
'name' => 'Тест 3',
'count' => 10,
'unit' => 'м',
'price' => 550,
'nds' => 20,
),
);

Нужны уточнения для примера. Задача не совсем понятна.
1. Отправляется откуда и куда.
2. Пример нужен на чистом php, php+форма или js+php?

Так как Вы сейчас озвучили задачу это просто добавление в массив строки и можно предположить что данные берутся из формы через POST из формы.

Код:

$prods[] = array(
'name' => $_POST['name'],
'count' => $_POST['count'],
'unit' => $_POST['unit'],
'price' => $_POST['price'],
'nds' => $_POST['nds']
);

И дальше отправляйте этот массив $prods куда хотите.
Таблицу делаете через foreach внутри формы. Кнопка - стандартный submit.

Код:

<form method='post'>
<input name='name' type='text' value='' />
...
<button type='submit' value='add' />
</form>

Upd.
Это самый простой вариант. Но если Вам нужно хранить весь массив на клиенте и отправлять каждый раз целиком , то там уже совершенно другие механизмы. Тогда нужно весь этот массив в переменную js запихнуть и ставить отдельный обработчик на кнопку. Но здесь не понятно хотите вы отправлять аяксом или же тоже постом с перезагрузкой страницы.
И не понятно где и как вы храните все введенное.

user99 · 23 Апр 2020

Как например отправить информацию из таблицы (с учетом что несколько раз использована ссылка Добавить строку)

<script type="text/javascript">
function addRow(id){
var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
var row = document.createElement("TR")
var td1 = document.createElement("TD")
td1.appendChild(document.createTextNode("<input name="data1">"))
var td2 = document.createElement("TD")
td2.appendChild (document.createTextNode("<input name="data2">"))
row.appendChild(td1);
row.appendChild(td2);
tbody.appendChild(row);
}
</script>

<table id="myTable" cellspacing="0" border="0">
<tbody>
<tr>
<td><input name="data1"></td><td><input name="data2"></td>
</tr>
</tbody>
</table>
<br>

<a href="javascript://" onclick="addRow('myTable');return false;">Добавить строку</a>

В виде массива:

$prods = array(
array(
'name' => 'Тест',
'count' => 7,
'unit' => 'усл.',
'price' => 12000,
'nds' => 20,
),
array(
'name' => 'Тест 2',
'count' => 100,
'unit' => 'шт.',
'price' => 5.50,
'nds' => 20,
),
array(
'name' => 'Тест 3',
'count' => 10,
'unit' => 'м',
'price' => 550,
'nds' => 20,
),
);

garphild · 24 Апр 2020

user99 написал(а):
Как например отправить информацию из таблицы (с учетом что несколько раз использована ссылка Добавить строку)

<script type="text/javascript">
function addRow(id){
var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
var row = document.createElement("TR")
var td1 = document.createElement("TD")
td1.appendChild(document.createTextNode("<input name="data1">"))
var td2 = document.createElement("TD")
td2.appendChild (document.createTextNode("<input name="data2">"))
row.appendChild(td1);
row.appendChild(td2);
tbody.appendChild(row);
}
</script>

<table id="myTable" cellspacing="0" border="0">
<tbody>
<tr>
<td><input name="data1"></td><td><input name="data2"></td>
</tr>
</tbody>
</table>
<br>

<a href="javascript://" onclick="addRow('myTable');return false;">Добавить строку</a>

В виде массива:

$prods = array(
array(
'name' => 'Тест',
'count' => 7,
'unit' => 'усл.',
'price' => 12000,
'nds' => 20,
),
array(
'name' => 'Тест 2',
'count' => 100,
'unit' => 'шт.',
'price' => 5.50,
'nds' => 20,
),
array(
'name' => 'Тест 3',
'count' => 10,
'unit' => 'м',
'price' => 550,
'nds' => 20,
),
);

В такой постановке вопроса и с такой функцией добавления строки ответ один - никак. Дело в том, что у Вас перепутались напрочь яваскрипт и php. Отправить в виде такого массива как Вы привели - никак. Это массив php. Но не массив javascript. PHP работает на сервере. Javascript на компьютере клиента. Для того чтобы заставить их обмениваться информацией есть несколько способов. Выбор способа зависит от задачи.

Вероятно Вы не увидели вопросы. Повторю их:

Нужны уточнения для примера. Задача не совсем понятна.
1. Отправляется откуда и куда.
2. Пример нужен на чистом php, php+форма или js+ajax+php?

Для того чтобы сделать Вам пример нужно хотя бы задачу сформулировать, а не основываться на догадках.

Вариант с JSON, например, такой:

Код:

<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript">
        var data = [];
      function addRow(id){
        data.push({
          data1: document.getElementById('data1').value,
          data2: document.getElementById('data2').value
        })
        document.getElementById('result').innerText = JSON.stringify(data);
        var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
        var row = document.createElement("TR")
        var td1 = document.createElement("TD")
        td1.appendChild(document.createTextNode(document.getElementById('data1').value));
        var td2 = document.createElement("TD")
        td2.appendChild(document.createTextNode(document.getElementById('data2').value));
        row.appendChild(td1);
        row.appendChild(td2);
        tbody.appendChild(row);
      }
    </script>
</head>
<body>
<table id="myTable" cellspacing="0" border="0">
    <tbody>
    <tr>
        <td><input id="data1" name="data1"></td><td><input id="data2" name="data2"></td>
    </tr>
    </tbody>
</table>
<div id="result"></div>
<br>

<button onclick="addRow('myTable');">Добавить строку</button>

</body>
</html>

user99 · 25 Апр 2020

garphild, добрый день!
Спасибо за Ваше внимание к моему вопросу.

1. Отправляется откуда и куда.
С index.php на create.php (происходит создание pdf файла с использованием информации полученной из формы).

2. Пример нужен на чистом php, php+форма или js+ajax+php?
Подойдет любой работоспособный вариант.[/QUOTE]

Код:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
#tbl {
    border-collapse: collapse;
}
#tbl td {
    border: 1px solid #ddd;
    padding: 4px;
}
#tbl input {
    width: 50px;
}
a.delRow, #addRow {
    display: block;
    cursor: pointer;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(function() {
    $('#addRow').click(function() {
        var t = $('#tbl');
        t.find('tr')
         .eq(1)
         .clone()
         .appendTo(t)
         .find('td:last')
         .append('<a class="delRow">удалить</a>')
         .end()
         .find('input')
         .val('');
    });
    $('#tbl').on('click', 'a.delRow', function() {
        $(this).closest('tr').remove();
    });
});
</script>
</head>
<body>
<form action="create.php" method="POST">
        <table id="tbl">
            <tr>
                <td>Поле раз</td>
                <td>Поле два</td>
                <td>Поле три</td>
                <td>Поле четыре</td>
                <td><a id="addRow">+</a></td>
            </tr>
            <tr>
                <td><input type="text" name="name[]" /></td>
                <td><input type="text" name="count[]" /></td>
                <td><input type="text" name="unit[]" /></td>
                <td><input type="text" name="price[]" /></td>
                <td></td>
            </tr>
        </table>
    <input type="submit"/>
</form>
</body>
</html>

Пример кода который получился, как переданные данные привести к виду:

Код:

$prods = array(
array(
'name' => 'Тест',
'count' => 7,
'unit' => 'усл.',
'price' => 12000,
'nds' => 20,
),
array(
'name' => 'Тест 2',
'count' => 100,
'unit' => 'шт.',
'price' => 5.50,
'nds' => 20,
),
array(
'name' => 'Тест 3',
'count' => 10,
'unit' => 'м',
'price' => 550,
'nds' => 20,
),
);

Сейчас данные приходят в формате:

Код:

$_REQUEST['name']
Array
(
    [0] => data1
    [1] => data2
    [2] => data3
)

$_REQUEST['count']
Array
(
    [0] => data1
    [1] => data2
    [2] => data3
)

$_REQUEST['unit']
Array
(
    [0] => data1
    [1] => data2
    [2] => data3
)

$_REQUEST['price']
Array
(
    [0] => data1
    [1] => data2
    [2] => data3
)

$_POST['name']
Array
(
    [0] => data1
    [1] => data2
    [2] => data3
)

$_POST['count']
Array
(
    [0] => data1
    [1] => data2
    [2] => data3
)

$_POST['unit']
Array
(
    [0] => data1
    [1] => data2
    [2] => data3
)

$_POST['price']
Array
(
    [0] => data1
    [1] => data2
    [2] => data3
)

html таблица / форма в массив

user99

Постоялец

Denzy

Злобный самаритянин

user99

Постоялец

garphild

Постоялец

user99

Постоялец

garphild

Постоялец

user99

Постоялец

garphild

Постоялец

user99

Постоялец