Question

我正在做作业，我用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。

Answer 1

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

最简单的方法是遍历列表并将其插入表或其他内容。例如：

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，使其看起来更好

热门使用html和css

1 个答案: