时间戳

首页 > 解决方案 > 如何在 x 列后动态创建新行

javascript - 如何在 x 列后动态创建新行

问题描述

我有想要table动态添加到的 JSON 数据。我已经能够做到这一点，但我想要一种情况，即在第四列之后，自动创建新的行和列，并将剩余的 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>');
}

标签： javascriptjqueryhtmldom

解决方案

奥卡姆剃刀 - 只需使用变量来跟踪您所在的位置。可能我的代码没有创建所需的 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);
    }

推荐阅读