1.抓取陣列總筆數
2.使用for迴圈抓取陣列
3.javascript-讀取陣列變數值，存入清單中
4.javascript-讀取陣列變數值，存入表格中
1.抓取陣列總筆數
menu_num = menu.length;
console.log(menu_num);
2.使用for迴圈抓取陣列並存入清單中
步驟1:
for (初始值; 條件值 ; i++) {
menu[0];
menu[1];
menu[2];
menu[3];
}
步驟2:
for (i = 0; i < ? ; i++) {
menu[0]
menu[1]
menu[2]
menu[3]
}步驟3:
把 i 印出來看看
for (i = 0; i < menu_num ; i++) {
console.log(i);
}
步驟4:
現在讓for迴圈自動產生
menu[0]
menu[1]
menu[2]
menu[3]menu[i]
3.javascript-讀取陣列變數值，存入清單中
for (i = 0; i < menu_num; i++) {
console.log(i);
menu_html += "<li>" + menu[i] + "</li>";
}完整程式碼:
<html>
<body>
<p id="demo"></p>
<script>
menu = ["最新消息", "產品資訊", "聯絡資訊", "關於我們"];
menu_num = menu.length; //讀出陣列總筆數
menu_html = "<ul>";
for (i = 0; i < menu_num; i++) {
console.log(i);
menu_html += "<li>" + menu[i] + "</li>";
}
menu_html +="</ul>";
console.log(menu_html);
document.getElementById("demo").innerHTML = menu_html ;
</script>
</body>
</html>
https://codepen.io/yiruatstudio/pen/PozBQQP
4.javascript-讀取陣列變數值，存入表格中
<html>
<body>
<p id="demo"></p>
<p id="demo2"></p>
<script>
menu = ["最新消息", "產品資訊", "聯絡資訊", "關於我們"];
mLen = menu.length;
text = "<table border='1'>";
for (i = 0; i < mLen; i++) {
text += "<tr><td>" + menu[i] + "</td></tr>";
}
text += "</table>";
document.getElementById("demo").innerHTML = text;
text2 = "<table border='1'><tr>";
for (i = 0; i < mLen; i++) {
text2 += "<td>" + menu[i] + "</td>";
}
text2 += "</tr></table>";
document.getElementById("demo2").innerHTML = text2;
</script>
</body>
</html>
https://codepen.io/yiruatstudio/pen/abZjqXP
Yiru@Studio - 關於我 - 意如