使用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是二维数组（一切该代码不会做出很大的意义，但纠正我，如果我错了），我发现与您的代码的以下问题：

• 您与cycleArr[i]比较j这可能是一个数组，而不是cycleArr[i].length。
• 在内部循环中，您正在访问cycleArr[i]而不是cycleArr[i][j]。
• 您将要覆盖strTable变量外循环的每次迭代，因为要分配<tr>，而不是附加的。
• 您一次又一次地声明变量strTable。它只应声明一次。
• 您将<tr> s和<td> s代入<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）。我冒昧地纠正你的帖子以避免混淆。

Answer 2

我把代码放到一个html文件中。以下是代码。请注意，您需要允许：

strTable - 通过添加+ =继续循环。从上面的代码中简化var strTable = strTable +“”。

这里的想法是，你有列和行。首先，您将从左向右循环方向，然后如果该行已完成，则需要转到下一行。

<div id="model_table">&npsp;</div> <!-- result here --> 

<script type="text/javascript"> 
    var cycleArr = [[1,2,3,4,5], [6,7,8,9,10]]; 
    var strTable = '<table border="1" cellpadding="5">'; 
    for(var i = 0; i < cycleArr.length; i++) { 
     strTable += "<tr>"; 
     for(var j = 0; j < cycleArr[i].length; j++) { 
     strTable += '<td>' + cycleArr[i][j] + '</td>'; 
     } 
     strTable += "</tr>"; 
    } 
    strTable += '</table>'; 

document.getElementById('model_table').innerHTML = strTable; 
</script>