gpt4 book ai didi

javascript - 热门使用html和css动态创建列表

转载 作者:太空宇宙 更新时间:2023-11-04 06:20:29 26 4
gpt4 key购买 nike

我正在做作业,我用 html、css、javascript 编写了前端。直到现在,当我按下一个按钮时,我从后端获取了一些数据,并在 javascript 中解析了响应。响应是一个元素数组。一个元素是一个结构。我想要的是动态构建这些元素的列表。我没有在谷歌上找到使用 javascript 的方法。一些提示/帮助?

您可以在下面看到,我尝试过将一些 HTML 附加到 HTML 元素 - 它没有用。

xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
source.value = "";
destination.value = "";

var array_rides = JSON.parse(this.responseText).results;
var rides_length = array_rides.length;
for (var i = 0;i < rides_length;i++) {
console.log(array_rides[i][DRIVER]);
console.log(array_rides[i][RIDERS]);
console.log(array_rides[i][SOURCE]);
console.log(array_rides[i][DESTINATION]);
console.log(array_rides[i][START]);
console.log(array_rides[i][SEATS_AVAILABLE]);
console.log(array_rides[i][SEATS_TOTAL]);

my_list.append('<span class="name">{0}</span>'.format(array_rides[i][DRIVER]));
}
}
};

所以,我想要一个动态填充的列表。类似(表格)的东西:

array_rides[0][DRIVER], array_rides[0][RIDERS], ...
array_rides[1][DRIVER], array_rides[1][RIDERS], ...
...
array_rides[n][DRIVER], array_rides[n][RIDERS], ...

当然,继承一些 css。

最佳答案

我假定文档中有一个列表,例如产品表或其他内容。

执行此操作的最简单方法是循环遍历列表并将其插入表格或其他内容。一个例子可能是这样的:

function somefunc() {
var table = document.getElementById('my_table');
var array_rides = ['cell1', 'cell2', 'cell3', 'cell4'];
var string;
string = "<table>";
for (var i = 0;i < array_rides.length;i++) {
//add table row
string += "<tr>";
//add all items in tabel cells
//you just have to replace the array_rides[i] with array_rides[i].DRIVER, array_rides[i].RIDERS... and so on
string += "<td>"+array_rides[i]+"</td>";
string += "<td>"+array_rides[i]+"</td>";
string += "<td>"+array_rides[i]+"</td>";
string += "<td>"+array_rides[i]+"</td>";
string += "<td>"+array_rides[i]+"</td>";
string += "<td>"+array_rides[i]+"</td>";
//close table row
string += "</tr>";

}
string += "</table>";
table.innerHTML = string;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}

th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}

tr:nth-child(even) {
background-color: #dddddd;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Testpage</title>
</head>
<body onload="somefunc();">
<div id="my_table"></div>
</body>
</html>

基本上,它所做的是从数组中获取所有数据并将它们附加到表中。您也可以添加一些 CSS 以使其看起来更好

关于javascript - 热门使用html和css动态创建列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55562810/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com