使用jQuery動態創建JS數組的HTML表格

我想用jQuery動態創建一個HTML表格。我有一個充滿數據的JS數組。使用jQuery動態創建JS數組的HTML表格

我試過以下它不起作用，什麼也沒有顯示出來。我究竟做錯了什麼？

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>

來源

2017-03-16 Pete

假設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）。我冒昧地糾正你的帖子以避免混淆。

來源

2017-03-16 21:42:40 CherryDT

謝謝你的答案櫻桃。然而，這段代碼似乎與我已有的內容衝突 – Pete

我創建了一個html表格，它在html中被硬編碼，並且使用'$（document）.ready（function（）{/ /讀取時加載 \t（var i = 0; i '）; //填寫表格中的國家詳情 \t \t tr.append（「」+ countryArr [i] .country_name +「」）; \t} }）; '這似乎覆蓋了從cycleArr獲取的數據。我該如何解決這個問題？ – Pete

我把代碼放到一個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>

來源

2017-03-17 00:46:12 zms

使用jQuery動態創建JS數組的HTML表格

回答

相關問題