Javascript数组创建表答案

【问题标题】：Javascript Arrays to create tableJavascript数组创建表
【发布时间】：2016-12-19 21:51:30
【问题描述】：

我正在尝试使用数组为学校的课程大纲创建一个表。如何使第二个数组（num）在课程标题旁边排列。现在它只是堆叠在它们下方的同一列中......

<script>

var titl = ["Oral Communication","Applications/Concepts","SQL Programming","HTML and Dreamweaver","Javascript","Flash","XML","Cascading Style Sheets","XSL","ASP.NET","PHP/MySQL","Windows Operating Systems","Digital Imaging with Photoshop","Web Development Internship"];
var num = ["ENG171","CIT110","CIT236","CMT111","CMT113","CMT115","CMT117","CMT125","CMT211-see note*","CMT215","CMT241","CIT268","VMA105","CMT299"];

document.write('<table>')
document.write('<tr><th>Web Development Concentration Courses</th></tr>');

for (var i = 0; i < titl.length; i++)
{
    document.write('<tr><td>' + titl[i] + '</td></tr>');
}

for (var j = 0; j < num.length; j++)
{
    document.write('<tr><td>' + num[j] + '</td></tr>');
}
document.write('</table>'); 

</script>

【问题讨论】：

您的意思是将titl 中的元素放在第1 列，将num 中的元素放在第2 列并排？
是的，没错！谢谢！
@hendro3 您愿意接受任何答案吗？您可以通过单击答案旁边的勾选按钮来做到这一点。你只能做一个。

标签： javascript arrays html-table

【解决方案1】：

在构建 HTML 时不能拆分内容。另外，请不要使用document.write，因为它很危险。

此外，主要的解决方案是组合循环。我通过检查两个数组的长度是否相同来做到这一点：

var titl = ["Oral Communication", "Applications/Concepts", "SQL Programming", "HTML and Dreamweaver", "Javascript", "Flash", "XML", "Cascading Style Sheets", "XSL", "ASP.NET", "PHP/MySQL", "Windows Operating Systems", "Digital Imaging with Photoshop", "Web Development Internship"];

var num = ["ENG171", "CIT110", "CIT236", "CMT111", "CMT113", "CMT115", "CMT117", "CMT125", "CMT211-see note*", "CMT215", "CMT241", "CIT268", "VMA105", "CMT299"];

var finalHTML = '<table>';
finalHTML += '<tr><th>Web Development Concentration Courses</th></tr>';

if (titl.length == num.length)
    for (var i = 0; i < titl.length; i++) {
      finalHTML += '<tr><td>' + titl[i] + '</td><td>' + num[i] + '</td></tr>';
    }

finalHTML += '</table>';

document.getElementById("container").innerHTML = finalHTML;

&lt;div id="container"&gt;&lt;/div&gt;

预览

另外，给<th> 一个colspan="2" 会给你更好的结果：

finalHTML += '<tr><th colspan="2">Web Development Concentration Courses</th></tr>';

【讨论】：

【解决方案2】：

结合两个循环

for (var i = 0, j= 0; i < titl.length || j < num.length; i++,j++)
{
    document.write('<tr><td>' + titl[i] + '</td> <td>' + num[i] + '</td></tr>');

}

【讨论】：

你没有增加，甚至没有使用j。