Как добавить в конец таблицы несколько записей?

Question

[Анастасия]

Здравствуйте. Мой php заполняет мне таблицу вот таким образом:

<tbody>
<? foreach ($order as $o): ?>
	<tr>
		<input type="hidden" value="<?= $o['_id'] ?>" class="sysid">
		<td class="id"><?= $o['number'] ?></td>
		<td>
			<p class="bold"><?= $o['name_person'] ?></p>
			<p class="cont"><?= $o['mailphone_person'] ?></p>
		</td>
		<td><?= $o['adress_person'] ?></td>
		<td>
			<? foreach ($o['products'] as $p): ?>
				<p><?= $p ?></p>
			<? endforeach; ?>
		</td>
		<td><?= $o['price'] ?> ₽</td>
		<td>
			
			<select name="status" class="opti">
			<? foreach ($options as $op): ?>
				<option value="<?= $op ?>" <? if ($op == $o['status']): ?> selected <? endif; ?> ><?= $op ?></option>
			<? endforeach; ?>
			</select>
		</td>
	</tr>
<? endforeach; ?>
</tbody>

Дальше я хочу сделать подзагрузку следующих полей. Как мне на js реализовать генерацию таблицы?

Я начала с вот такого:

let table = document.querySelector('tbody');
let insrow = table.insertRow(-1);
let inscell = insrow.insertCell(-1);

Но у меня ощущение, что я делаю что-то не то. Нет варианта проще, чтобы также как в php сделать? Чтобы просто собираешь одну строку, а он дальше по образу и подобию генерирует дальше

я имею в виду вот так.

<? foreach ($order as $o): ?>
  <tr>
    <input type="hidden" value="<?= $o['_id'] ?>" class="sysid">
...

Чтобы я туда просто переменные вставила

Comments

[Sergio]

А нужно именно на чистом JS или есть jQuery? с jQuery попроще будет. В целом вроде бы правильно делаете. Только вот в tr по идее не может быть input, только td / th.

Answer 1

[Sergio]

Проще всего было бы создать шаблон строки с нужными вам ячейками, а потом его просто добавлять в таблицу, заполняя где надо пробелы. Советую погуглить Mustache / Handlebars.

Пример шаблона:

<tr>
    <input type="hidden" value="{{sysid}}" class="sysid">
    <td>
        <p class="bold">{{personName}}</p>
        <p class="bold">{{personAddress}}</p>
    </td>
</tr>

Потом просто вызываете Mustache вот так:

Mustache.render(templateHtmlString, {
    sysid: 456,
    personName: 'John Doe',
    personAddress: '123 Main St',
});

Другой вариант - использовать frontend-фреймворк аля React / Vue / Angular.

Если подключение сторонних скриптов не вариант, то кроме ручного конструирования строк и ячеек, как в вашем примере, не знаю способов (разве что написать свой Mustache).

Как вариант ещё можно реализовать API на стороне PHP, которое возвращало бы HTML для новых строчек. Некоторые так делают (или раньше делали).

Answer 2

[im_prisoner]

Ваша таблица

const table = document.querySelector('tbody');

Берёте шаблон и кладёте его в переменную

const row = '<tr><td>--вашконент--</td></tr>'

Вот функция, чтобы прилепить его снизу таблицы

table.insertAdjacentHTML('beforeend', row)

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

Comments

[Анастасия]

Да, спасибо, но у меня возникла проблема с select. Я не знаю как его там создать и указать тот, у которого будет атрибут selected.

У меня многомерные массивы, но самое главное это вот:
структура select

fields:{
status:{
options: {
default: "В обработке",
options: "В обработке,Принят,Завершён,Невозможен",
type: "select"
}
}
}

и сама запись:

{
adress_person: "Санкт-Петербург, ул. Мирона Фёдорова 123, кв. 9",
mailphone_person: "[e-mail]",
name_person: "sdafasdf asdfasdfasdf",
number: "126358K2S4980",
price: 4980,
products:{"Яблоко  990", "Апельсин M 3990"},
status: "В обработке",
_id: "60c406b0363737050800029f"
}

В php я делаю так:

<? foreach ($options as $op): ?>
        <option value="<?= $op ?>" <? if ($op == $o['status']): ?> selected <? endif; ?> ><?= $op ?></option>
<? endforeach; ?>