使用 Javascript 从列表创建表

Question

我的列表如下所示：[["t0","b0",x0],["t1","b1",x1],......,["tn","bn", xn] x : 0=100.

现在我需要创建一个带有 JavaScript 文件的表，其中显示 t 在第 1 列、b 的第 2 列和 x 第 3 列中。

我已经搜索了几天的答案，试图修改更简单的代码，但一种或另一种方式不起作用。

在下一步中，我想用我的 x 控制进度条的“填充”。

在 HTML 中：

<div id="bar1" class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 40%" aria-valuenow="x" aria-valuemin="0" aria-valuemax="100">x%</div>

所以我需要在每个 x 列中获取此代码，并能够访问两个 x 变量。 我的容器里有一个：

document.getElementById("bar1").innerHTML

不知道如何更改 div 属性中的 x。

下面是表格中的一行：

  <tr>
                    <th id="t_titel18" scope="row">T18</th>
                    <td id="t_des18">T18_Beschreibung
                    </td>
                    <td><div class="progress">
                <div id="t_bar18" class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 0%" aria-valuenow="x" aria-valuemin="0" aria-valuemax="100">x%</div>
              </div></td>

                  </tr>

所以我需要访问每个单独的列来更改我的属性。

但只要回答我的问题的第一部分，你就对我有很大的帮助。 谢谢 克里斯托弗·洛

Answer 1

您只需创建两个嵌套循环。外循环处理每一行，内循环处理每一行的列：

var myList = [["t0","b0",0],["t1","b1",1],["t2","b2",2],["t3","b3",3]];
var html = "";
$.each(myList, function(rowNumber,rowData){
    html += "<tr>";
    $.each(rowData, function(columnNumber,columnData){
        html += "<td>"+columnData+"</td>";
    });
    html += "</tr>";
});
$("#myTable").html(html);

我为您创建了一个 jSFiddle，您可以在其中看到它的实际效果：https://jsfiddle.net/4qat9aff/3/ 我正在使用 jQuery，但您当然可以使用内置的 Javascript 函数，例如 for...of。

我不明白您为什么需要进度条，它会加载得如此之快，以至于用户甚至都不会注意到。