在 HTML 表格中使用数组答案

【问题标题】：Use Array in HTML table在 HTML 表格中使用数组
【发布时间】：2026-01-25 19:30:01
【问题描述】：

我有一个数组，我只想在我的表中使用它。这是我的想法，但我不知道如何使用在 td-tag 中显示的数组：

<head>
<script type="text/javascript">
    function list() {
        var list = ['Tim','Tom','Tam']
    }
</script>
</head>
<body>
    <table>
        <tr>
            <td>Place 1: list[0]</td>
            <td>Place 2: list[1]</td>
            <td>Place 3: lsit[2]</td>
        </tr>
    </table>
</body>

漏洞的想法是从 Python Script 生成一个数组，它从 xlsx 文件中获取它，并将其交给 HTML 页面。

【问题讨论】：

首先放弃该功能，然后<script>document.write(list[0])</script> 将起作用。不过，还有无数更好的方法。
对不起，但在我看来这个问题太模糊了。您可能应该了解更多关于 JavaScript 的知识，然后再问一个更具体的问题。

标签： javascript html arrays

【解决方案1】：

创建一个数组，并为每个元素创建一个 TD 元素。

var list = [0, 1, 2, 3, 4, 5],
    pushTo = arr => {
    arr.forEach((cur , i) => {
    let tempElem = document.createElement("TD");
        tempElem.innerHTML = `list[${i}]`;
        tlist.appendChild(tempElem);
    });
    };
    
    pushTo(list);

<table>
<tr id="tlist">
</tr>
</table>

【讨论】：

【解决方案2】：

纯 JS：

<html>
    <head>
      <script type="text/javascript">
        var list = ['Tim', 'Tom', 'Tam'];
      </script>
    </head>
    <body>
      <table>
        <tbody>
          <tr>
          </tr>
        </tbody>
      </table>
      <script>
      	var tr = document.querySelectorAll('table > tbody > tr')[0];
        
        for (var l in list) {
        	var index = parseInt(l) + 1;
            
        	var td = document.createElement('td');
            td.innerHTML = 'Place ' + index + ': ' + list[l];
            
        	tr.appendChild(td);
        }
      </script>
	</body>
</html>

AngularJS：

var angularApp = angular.module('angularApp', []);

angularApp.controller('angularCtrl', function ($scope) {
  $scope.list = ['Tim', 'Tom', 'Tam'];
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="angularApp" ng-controller="angularCtrl"> 
  <table>
    <tbody>
      <tr>
        <td ng-repeat="l in list">Pace {{$index + 1}}: {{l}}</td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：