Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.06.2021, 12:43
Аватар для nastya97core
Аспирант
Отправить личное сообщение для nastya97core Посмотреть профиль Найти все сообщения от nastya97core
 
Регистрация: 04.04.2020
Сообщений: 60

Как добавить в конец таблицы несколько записей?
Здравствуйте. Мой 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 сделать? Чтобы просто собираешь одну строку, а он дальше по образу и подобию генерирует дальше
Ответить с цитированием
  #2 (permalink)  
Старый 12.06.2021, 12:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

nastya97core,
два цикла insertRow и insertCell обычно так
Ответить с цитированием
  #3 (permalink)  
Старый 12.06.2021, 12:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

nastya97core,
можно цикл по массиву данных
Ответить с цитированием
  #4 (permalink)  
Старый 12.06.2021, 13:20
Аватар для nastya97core
Аспирант
Отправить личное сообщение для nastya97core Посмотреть профиль Найти все сообщения от nastya97core
 
Регистрация: 04.04.2020
Сообщений: 60

рони,
А нет возможности сразу собрать html каркас, чтобы как в php?
я имею в виду вот так:
<? foreach ($order as $o): ?>
  <tr>
    <input type="hidden" value="<?= $o['_id'] ?>" class="sysid">
...

Чтобы я туда просто переменные вставила
Ответить с цитированием
  #5 (permalink)  
Старый 12.06.2021, 13:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

nastya97core,
так foreach по массиву данных
Ответить с цитированием
  #6 (permalink)  
Старый 12.06.2021, 23:24
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,121

Сообщение от nastya97core
чтобы как в php?
Если бы у бабушки был бы член - то она была бы дедушкой.

ПХП серверный язык и это не JavaScript.

Как вариант, ты можешь в той таблице добавить еще один tbody (в ПХП) с одной пустой строкой... Скрыть его.
При получении данных клонировать ту строку из скрытого tbody... Заполнять ее данными и вставлять в видимый tbody.
Ответить с цитированием
  #7 (permalink)  
Старый 13.06.2021, 11:14
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,701

Сообщение от nastya97core
Нет варианта проще, чтобы также как в php сделать? Чтобы просто собираешь одну строку, а он дальше по образу и подобию генерирует дальше
Можно через template.
Как то так

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)


Для вставки переменных вместо строк '...' используйте `${}`
Ответить с цитированием
  #8 (permalink)  
Старый 15.06.2021, 13:03
Кандидат Javascript-наук
Отправить личное сообщение для od0201 Посмотреть профиль Найти все сообщения от od0201
 
Регистрация: 07.05.2020
Сообщений: 108

Сообщение от nastya97core Посмотреть сообщение
рони,
А нет возможности сразу собрать html каркас, чтобы как в php?
я имею в виду вот так:
<? foreach ($order as $o): ?>
  <tr>
    <input type="hidden" value="<?= $o['_id'] ?>" class="sysid">
...

Чтобы я туда просто переменные вставила
[[1,2,3],[4,5,6],[7,8,9]].map(tr=>`<tr>${tr.map(td=>`<td>${td}</td>`).join('')}</tr>`).join('')
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вывод из таблицы в БД c помощью AJAX smart-create AJAX и COMET 4 29.12.2016 20:44
Обратный отсчет на js как добавить 0 при значении от 0 до 9 kovalenko3331 Общие вопросы Javascript 2 08.04.2016 08:59
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
Как добавить блок зума не переж body а в необходимый блок? ilyas-> Элементы интерфейса 0 30.07.2013 15:27
Как правильно добавить в javascript несколько стилей css? trixter5 Javascript под браузер 3 04.04.2013 23:20