Как динамически создавать новую строку после x числа столбцов

#javascript #jquery #html #dom

#javascript #jquery #HTML #dom

Вопрос:

У меня есть данные JSON, которые я хочу добавить в table динамически. Я смог сделать именно это, но я хочу ситуацию, при которой после четвертого столбца автоматически создаются новая строка и столбец, а остальные данные JSON заполняются во вновь созданном столбце. Я понятия не имею, как выполнить эту задачу.

Вот мой код; данные в формате JSON взяты из базы данных

 for (var i = 0; i < data.length; i  ) {
  var p = data[i];
  var occupied = p.occupied;

  $("#room").append('<td>n
   <div class="card cd" style="width: 15rem;">n
<img class="card-img-top" src="../images/Executive_Suite.jpg" alt="HOTEL D RIO">n
<div class="card-body r1" style="background-color: green">n
<h6 class="card-title name"><span>'   p.category   '</span><br/><span>'   p.position   '</span></h6> n
<p class="card-text price" style="color: #fff; font-size: 13px"><span>#'   p.unitprice   ' per 24hrs</span></p> n
<a type="button" class="btn btn-dark btn-sm cbody cbody0" style="color: #fff;"><i class="fa fa-plus"></i>Book Now</a>n
</div></div></td>');
}

1. Какой элемент #room ? Это должно быть a tr для того, чтобы добавляемый вами HTML был действительным, поэтому вам нужно изменить append() , чтобы добавить HTML в таблицу вместо этого, чтобы поддерживать действительность.

2. Что вы пробовали в связи с вашим требованием? Похоже, вам просто нужно подсчитать, сколько столбцов вы создали на данный момент (возможно, с помощью простого счетчика циклов или отдельной переменной counter, которую вы увеличиваете вручную) в текущей строке, и когда вы дойдете до 4, начните новую строку. Логика не кажется сложной. Проблема, с которой вы можете столкнуться, заключается в том, что #room будет идентифицирована единственная строка вашей таблицы (предполагая, что это действительно <tr> для начала …) — но, конечно, новая строка должна быть новой, а не существующим элементом.

3. Вероятно, вы захотите сохранить <table> как объект, а затем создать новый объект row и добавить к нему <tds> , и когда вы дойдете до 4, добавьте эту строку в таблицу и выполните цикл, чтобы начать новую строку. Это немного неясно, не видя связанного HTML.

Ответ №1:

Бритва Оккама — просто используйте переменную, чтобы отслеживать, где вы находитесь. Возможно, мой код не создает желаемый HTML, но я надеюсь, вы поняли идею …?

     rowcnt = 0;
    for (var i = 0; i < data.length; i  ) {
        var out = '';
        var p = data[i];
        var occupied = p.occupied; 
        rowcnt  ;
        if (rowcnt > 4){
            out  = '</tr><tr>';
            rowcnt = 0;
        }else{
            out  = '<td>
                <div class="card cd" style="width: 15rem;">
                    <img class="card-img-top" src="../images/Executive_Suite.jpg" alt="HOTEL D RIO">
                    <div class="card-body r1" style="background-color: green">
                        <h6 class="card-title name"><span>' p.category '</span><br/><span>' p.position '</span></h6>
                        <p class="card-text price" style="color: #fff; font-size: 13px"><span>#' p.unitprice ' per 24hrs</span></p>
                        <a type="button" class="btn btn-dark btn-sm cbody cbody0" style="color: #fff;"><i class="fa fa-plus"></i>Book Now</a>
                    </div>
                </div>
            </td>';
        }
        $("#room").append(out);
    }