Ⅰ、问题描述:
用JavaScript + html实现,二维或多维数组输出整齐划一的格式;
分析:
如果仅使用 JavaScript 语句输出的信息不整齐;
如:
而在加入 html 语句之后输出的信息表格化,很整齐;
如:
Ⅱ、实现过程如下:
1、运行软件VScode,亲测可实现;
2、运行代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr3 = [[12,30],[5,7],[5,7],[5,7]];
//该大的for循环是输出不整齐部分的代码;
for(var i=0; i<arr3.length; i++){ //该部分是外循环,即arr3[i],是外层的一维数组;
for(var j=0; j<arr3[i].length; j++){ //该部分是内循环,即arr3[i][j],是内层的二维数组;
document.write(arr3[i][j] + ' ');
}
document.write('<br/>'); //该代码是指:内循环完全结束之后的换行符;
}
//该大的for循环是输出表格化部分的代码;
document.write("<table border='1'>"); //该代码是指:使输出信息表格化的 table 表格中的 <table></table> 标签;
for(var i=0; i<arr3.length; i++) { //该部分是外循环,即arr3[i],是外层的一维数组;
document.write('<tr>'); //该代码是指:table 表格中的 <tr></tr> 标签;
for(var j=0; j<arr3[i].length; j++){ //该部分是内循环,即arr3[i][j],是内层的二维数组;
document.write('<td>' + arr3[i][j] + '</td>');//该代码是指:table 表格中的 <td></td> 标签;
}
document.write('</tr>');
}
document.write('</table>');
</script>
</body>
</html>
3、结果展示:
注意:这是代码运行结束后的页面展示结果;
Ⅲ、小结:
哪里有不对或不合适的地方,还请大佬们多多指点和交流!