Question

我的列表如下所示：[[“t0”，“b0”，x0]，[“t1”，“b1”，x1]，......，[“tn”，“bn”， XN] x：0＆lt; = x＆gt; = 100。

现在我需要创建一个包含JavaScript文件的表格，其中显示t位于第1列，第2列和第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>

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

但只是通过回答我的问题的第一部分，你正在帮助我，很多。谢谢 ChristopherLöw

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 。

我不明白为什么你需要一个进度条，这会加载得太快，用户甚至都不会注意到。

使用Javascript从列表创建表

1 个答案: