原生js 接口二维数组渲染页面
时间: 2023-10-04 07:04:05 浏览: 129
可以使用原生JS将一个二维数组渲染到页面上,具体方法如下:
首先,我们需要一个 HTML 页面,比如说一个`<table>`元素,用来显示这个二维数组。HTML 代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>二维数组渲染页面</title>
</head>
<body>
<table id="myTable"></table>
<script src="app.js"></script>
</body>
</html>
```
接下来我们编写 JavaScript 代码,首先定义一个二维数组:
```javascript
var arr = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
```
然后,我们需要将这个二维数组渲染到 HTML 页面上,具体步骤如下:
1. 获取 `<table>` 元素。
2. 使用嵌套的 for 循环遍历二维数组,生成一行行的 `<tr>` 元素和 `<td>` 元素,并将它们添加到 `<table>` 元素中。
3. 将生成的 HTML 添加到页面中。
完整的 JavaScript 代码如下:
```javascript
var arr = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
var table = document.getElementById("myTable");
for (var i = 0; i < arr.length; i++) {
var row = document.createElement("tr");
for (var j = 0; j < arr[i].length; j++) {
var cell = document.createElement("td");
var cellText = document.createTextNode(arr[i][j]);
cell.appendChild(cellText);
row.appendChild(cell);
}
table.appendChild(row);
}
```
以上代码将生成一个包含二维数组的 `<table>` 元素,并将其渲染到页面中。
阅读全文