javascript - 使用 jQuery 从 JS 数组动态创建 HTML 表

Question

我想使用 jQuery 动态创建 HTML 表格。我有一个充满数据的 JS 数组。

我尝试了以下方法，但不起作用，什么也没有显示。我做错了什么？

Javascript代码

for(var i = 0; i < cycleArr.length; i++) {
    var strTable = "<tr>"
    for(var j = 0; j < cycleArr[i]; j++) {
        var strTable = strTable + "<td>";
        var strTable = strTable + cycleArr[i];
        var strTable = strTable + "</td>";
    }
    var strTable = strTable + "</tr>";
}
$('#model_table').append(strTable);

HTML 代码

<div id="model_table">

</div>

Answer 1

假设cycleArr是一个二维数组(对于其他所有内容，此代码没有多大意义，但如果我错了，请纠正我)，我发现您的代码存在以下问题:

• 您正在比较j与 cycleArr[i]这可能是一个数组，而不是 cycleArr[i].length .
• 在内循环中您正在访问 cycleArr[i]而不是cycleArr[i][j] .
• 您正在覆盖您的strTable外循环每次迭代中的变量，因为您正在分配 <tr>而不是附加它。
• 您正在声明变量 strTable一遍又一遍地。它应该只声明一次。
• 您正在插入<tr>和 <td>进入 <div>而不是<table> 。虽然这可能是有意为之，但我认为并非如此。

这是您的代码的工作版本:

var cycleArr = [['a', 'b', 'c'], ['d', 'e', 'f']];

var strTable = "";
for(var i = 0; i < cycleArr.length; i++) {
  strTable += "<tr>"
  for(var j = 0; j < cycleArr[i].length; j++) {
    strTable += "<td>";
    strTable += cycleArr[i][j];
    strTable += "</td>";
  }
  strTable += "</tr>";
}
$('#model_table').append(strTable);

table {
  border-collapse: collapse;
}

td {
  border: 1px solid grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="model_table">

</table>

此外，您写道您有一个“JSON 数组”，但看起来您有一个 JS (JavaScript) 数组。 JSON 数组是一个对数组进行编码的字符串(在解析它之前您将无法对其进行迭代，这使其不再是 JSON)。我冒昧地纠正了您的帖子以避免混淆。