Как добавить в конец таблицы несколько записей?
Здравствуйте. Мой 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 сделать? Чтобы просто собираешь одну строку, а он дальше по образу и подобию генерирует дальше |
nastya97core,
два цикла insertRow и insertCell обычно так |
nastya97core,
можно цикл по массиву данных |
рони,
А нет возможности сразу собрать html каркас, чтобы как в php? я имею в виду вот так:
<? foreach ($order as $o): ?>
<tr>
<input type="hidden" value="<?= $o['_id'] ?>" class="sysid">
...
Чтобы я туда просто переменные вставила |
nastya97core,
так foreach по массиву данных |
Цитата:
ПХП серверный язык и это не JavaScript. Как вариант, ты можешь в той таблице добавить еще один tbody (в ПХП) с одной пустой строкой... Скрыть его. При получении данных клонировать ту строку из скрытого tbody... Заполнять ее данными и вставлять в видимый tbody. |
Цитата:
Как то так
const tmp = document.createElement('template')
let s = ''
// Тут заполняем строку HTML кодом
// например в цикле
for (let i = 0; i<nr; i++) {
s+='<tr>';
// заполняем ячейки
s+='<td>....</td>';
s+='<td>....</td>';
s+='<td>....</td>';
s+='</tr>';
}
tmp.innerHTML = s;
let tbody = document.querySelector('tbody');
tbody.appendChild(tmp.content)
Для вставки переменных вместо строк '...' используйте `${}` |
Цитата:
[[1,2,3],[4,5,6],[7,8,9]].map(tr=>`<tr>${tr.map(td=>`<td>${td}</td>`).join('')}</tr>`).join('')
|
| Часовой пояс GMT +3, время: 13:28. |