我想创建此布局,动态创建它的列表,从数据库中获取数据并填充。
这是布局的代码:
<div class="card-body">
<!-- person -->
<div class="row" id="img_div">
<div class="col-12 col-sm-12 col-md-2 text-center">
<img src="http://placehold.it/120x80" alt="prewiew" width="120" height="80">
</div>
<div id="text_div" class="col-12 text-sm-center col-sm-12 text-md-left col-md-6">
<h4 class="product-name"><strong>Person Name</strong></h4>
<h4>
<small>state</small>
</h4>
<h4>
<small>city</small>
</h4>
<h4>
<small>zip</small>
</h4>
</div>
<div class="col-12 col-sm-12 text-sm-center col-md-4 text-md-right row">
</div>
</div>
<!-- END person -->
<!-- person -->
<div class="row" id="img_div">
<div class="col-12 col-sm-12 col-md-2 text-center">
<img src="http://placehold.it/120x80" alt="prewiew" width="120" height="80">
</div>
<div id="text_div" class="col-12 text-sm-center col-sm-12 text-md-left col-md-6">
<h4 class="product-name"><strong>Person Name</strong></h4>
<h4>
<small>state</small>
</h4>
<h4>
<small>city</small>
</h4>
<h4>
<small>zip</small>
</h4>
</div>
<div class="col-12 col-sm-12 text-sm-center col-md-4 text-md-right row">
</div>
</div>
<!-- END person -->
</div>
回顾一下,我想动态复制“人”布局以填充数据库数据
有没有可以执行此工作的Javascript库?
您可以使用for循环将HTML附加到您选择的元素上。循环中的i是从数据库接收到的元素的大小
for(let i=1;i<10;i++)
{
document.querySelector('.card-body').innerHTML+=`<div class="row" id="img_div">
<div class="col-12 col-sm-12 col-md-2 text-center">
<img src="http://placehold.it/120x80" alt="prewiew" width="120" height="80">
</div>
<div id="text_div" class="col-12 text-sm-center col-sm-12 text-md-left col-md-6">
<h4 class="product-name"><strong>Person`+i+`</strong></h4>
<h4>
<small>state</small>
</h4>
<h4>
<small>city</small>
</h4>
<h4>
<small>zip</small>
</h4>
</div>
<div class="col-12 col-sm-12 text-sm-center col-md-4 text-md-right row">
</div>
</div>
`
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="card-body">
<!-- person -->
</div>
如果数据是对象数组,则可以对其进行迭代以生成将HTML before插入DOM中。*
这里,我使用了一个辅助函数来生成每张个人名片(personCardHtml
)的HTML。它返回一个template literal,它将在HTML的正确位置填充该人的详细信息。
我已经使用Array.reduce数组上的people
来生成all个人名片的单个HTML字符串。
然后我使用insertAdjacentHTML将html字符串插入<div id="persons-container"></div>
const people = [{"name": "Henrietta Marsh","state": "Northern Mariana Islands","city": "Ernstville","zip": 7226},{"name": "Sandy Copeland","state": "Wyoming","city": "Hobucken","zip": 4594},{"name": "Logan Frank","state": "Puerto Rico","city": "Talpa","zip": 8670}]
const personCardHtml = (person) => {
return `<div class="card-body">
<!-- person -->
<div class="row" id="img_div">
<div class="col-12 col-sm-12 col-md-2 text-center"><img src="http://placehold.it/120x80?text=${person.name}" alt="prewiew" width="120" height="80"></div>
<div id="text_div" class="col-12 text-sm-center col-sm-12 text-md-left col-md-6">
<h4 class="product-name"><strong>${person.name}</strong></h4>
<h4><small>${person.state}</small></h4>
<h4><small>${person.city}</small></h4>
<h4><small>${person.zip}</small></h4>
</div>
</div>
<!-- END person -->`
}
const reducer = (accumulator, currentValue) => accumulator + personCardHtml(currentValue);
const personsHtml = people.reduce(reducer, '')
const container = document.querySelector('#persons-container')
container.insertAdjacentHTML('beforeend', personsHtml);
<div id="persons-container"></div>
*如果您希望页面表现出色,则最好将DOM操作保持在最低水平。
我将生成与您在上图中提到的设计相同的设计。在文件中添加CSS。动态javascript创建多个数据。
$(document).ready(function(){
for(i=0;i<10;i++){
$("#allPerson").append(`<div class="row" id="img_div">
<div class="col-12 col-sm-12 col-md-2 text-center person">
<img src="http://placehold.it/120x80" alt="prewiew" width="120" height="80">
</div>
<div id="text_div" class="col-12 text-sm-center col-sm-12 text-md-left col-md-6 div">
<h4 class="product-name"><strong>Person Name</strong></h4>
<h4>
<small>state</small>
</h4>
<h4>
<small>city</small>
</h4>
<h4>
<small>zip</small>
</h4>
</div>
<div class="col-12 col-sm-12 text-sm-center col-md-4 text-md-right row">
</div>
</div>`);
}
});
.person{
float:left;
margin-right:10px;
}
#img_div{
width:100%;
margin:10px;
float:left;
}
h4{
margin:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div class="card-body" id="allPerson">
<!-- person -->
<!-- END person -->
<!-- person -->
<!-- END person -->
</div>
使用以下代码创建动态元素并将属性添加到该元素。
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
margin-bottom: 10px;
}
</style>
</head>
<body>
<p>Click the button to create a P element with some text, and append it to DIV.</p>
<div id="myDIV">
A DIV element
</div>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var para = document.createElement("P");
para.innerHTML = "This is a paragraph.";
document.getElementById("myDIV").appendChild(para);
}
</script>
</body>
</html>
使用纯JavaScript,您可以执行此操作。演示:https://codepen.io/ftj07/pen/KKppeaL
<div class="row" id="designId"><div>
<input type="button" onClick="generateList()" value="generateList" />
function generateList() {
var personList = [
{ name: "Abc", state: "41", city: "USA", zip: "124" },
{ name: "Abc", state: "41", city: "USA", zip: "124" },
{ name: "Abc", state: "41", city: "USA", zip: "124" },
{ name: "Abc", state: "41", city: "USA", zip: "124" },
{ name: "Abc", state: "41", city: "USA", zip: "124" }
]
let design = "";
for(let item of personList){
design += `
<div class="col-12 col-sm-12 col-md-2 text-center">
<img src="http://placehold.it/120x80" alt="prewiew" width="120" height="80">
</div>
<div id="text_div" class="col-12 text-sm-center col-sm-12 text-md-left col-md-6">
<h4 class="product-name"><strong>${item.name}</strong></h4>
<h4>
<small>${item.state}</small>
</h4>
<h4>
<small>${item.city}</small>
</h4>
<h4>
<small>${item.zip}</small>
</h4>
</div> `
}
console.log("da",design)
document.getElementById("designId").innerHTML = design;
}
您可以在js中使用模板文字来解决您的问题。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>JS Bin</title>
</head>
<body>
<div id="root"></div>
<script>
let root = document.getElementById("root");
const persons = [
{
name: "person1",
state: "person1_state",
city: "person1_city",
zip: "person1_zip"
},
{
name: "person2",
state: "person2_state",
city: "person2_city",
zip: "person2_zip"
},
{
name: "person3",
state: "person3_state",
city: "person3_city",
zip: "person3_zip"
},
{
name: "person4",
state: "person4_state",
city: "person4_city",
zip: "person4_zip"
}
];
const renderPerson = persons => {
let data = ``;
persons.forEach(person => {
data += `
<div class="card-body">
<!-- person -->
<div class="row" id="img_div">
<div class="col-12 col-sm-12 col-md-2 text-center">
<img src="http://placehold.it/120x80" alt="prewiew" width="120" height="80">
</div>
<div id="text_div" class="col-12 text-sm-center col-sm-12 text-md-left col-md-6">
<h4 class="product-name"><strong>${person.name}</strong></h4>
<h4>
<small>${person.state}</small>
</h4>
<h4>
<small>${person.city}</small>
</h4>
<h4>
<small>${person.zip}</small>
</h4>
</div>
<div class="col-12 col-sm-12 text-sm-center col-md-4 text-md-right row">
</div>
</div>
<!-- END person -->
</div>`;
});
return data;
};
root.innerHTML = renderPerson(persons);
</script>
</body>
</html>