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

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">
...

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

Answer 1

[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; ?>