从HTML中复制内容插入

最新推荐文章于 2024-09-29 22:49:06 发布

@我不管

最新推荐文章于 2024-09-29 22:49:06 发布

阅读量560

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_44484552/article/details/91353148

本文介绍了一种使用JavaScript动态调整床位布局的方法，通过遍历数据库数据，实现床位的自动生成与编号，确保布局与数据同步更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不知道大家有没有遇到过同一种内容却要随数据库数据的增减而增减的情况呢？就好像是下图中的床位一样。我要它随着数据库的数据增加而增加，数据库的数据减少而减少这种情况下可以利用js复制前一个完整的代码块再从后面入。
在这里插入图片描述
直接复制的代码就是这样的，很短也很实用。
$.post(“addkiss”, function (obj) {
var content = $(’#col’).html();
$(’#col’).after(content);//内容后插入
console.log(obj);
});但是它的样子是这样的，明显不符合要求。样子有了，但是它右边少了一个床位。原来六个，现在五个。而且编号没变。
在这里插入图片描述
简便的方法不适合那只能用最笨的方法了。基本方法没变。就是手动复制了它的代码下来从新编辑一下。把编号也跟着循环这样编号就会自增了。这样做就是代码量会多一点，不过效果还是满意的。

for (var i = 0; i < obj.length; i++) {
                    if ((i+2)>9) {
                        var a = i + 2;
                    } else {
                        var a = "0"+(i + 2);
                    }
  var content = "<div class='col-lg-2 col-md-3 col-sm-3 col-xs-12'>" +
                  "<div class='panel bk-widget bk-border-off bk-webkit-fix'>" +
                    "<a class='panel-body bk-bg-white bk-bg-darken text-center'>" +
                   "<img src='/Moimg/QJ86281931098.jpg' style='height:50px;'/>" +
                   "<div class='berth' style='margin-top:10px;'>" +
                   "<div class='col-lg-1'><span>" +a+ "</span></div>" +
                   "<div class='col-lg-6'>" +
                   "<div class='checkbox-custom checkbox-success'>" +
                   "<input type='checkbox' id='nullBed'>" +
                   "<label class='form-check-label' for='nullBed'></label>" +
                    "</div>" +
"</div>" +
"</div>" +
"</a>" +
"</div>" +
"div>";
 $('#coll').before(content); before是在前面插入

}
在页面上给一个空的盒子在这个空盒子前面插入，如果直接插入顺序会倒过来。这样子写虽然代码量多，但方便修改添加的内容。下面就是用这个方法做出来的效果。是不是比上一个方法做出来的好看多了呢
在这里插入图片描述