Question

我有要动态添加到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>');
}

Answer 1

Occam的剃刀-只需使用一个变量来跟踪您的位置。可能我的代码无法创建所需的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);
    }

如何在x列数之后动态创建新行

1 个答案: