繁体   English   中英

热门使用html和CSS动态创建列表

[英]Hot to create a list dynamically with html and css

我正在做作业,并且用html,css,javascript编写了前端。 直到现在,当我按下按钮时,我都会从后端获取一些数据,并在javascript中解析响应。 响应是一组项目。 一个项目是一个结构。 我想要的是动态构建这些项目的列表。 我在Google上找不到用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,使其看起来更好

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM