nastya97core
@nastya97core
Начинающий программист

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

Здравствуйте. Мой 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">
...

Чтобы я туда просто переменные вставила
  • Вопрос задан
  • 38 просмотров
Пригласить эксперта
Ответы на вопрос 2
@sergiodev
Программист типо
Проще всего было бы создать шаблон строки с нужными вам ячейками, а потом его просто добавлять в таблицу, заполняя где надо пробелы. Советую погуглить 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 для новых строчек. Некоторые так делают (или раньше делали).
Ответ написан
@im_prisoner
Ваша таблица

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

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

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

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

table.insertAdjacentHTML('beforeend', row)

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы