在Javascript中使用for循环创建表答案

【问题标题】：Creating table using for loop in Javascript在Javascript中使用for循环创建表
【发布时间】：2017-10-13 18:12:36
【问题描述】：

我正在尝试使用 Javascript 在 html 文档中创建一个简单的时间表。到目前为止，这是我的代码：

<!DOCTYPE>
    <html>
    <head>
        <title>Table</title>
    </head>
    <body>
    <script language="javascript" type="text/javascript">
        for (var a=0; a < 10; a++) {
            document.write("<tr>");
            for(var b=0; b<10; b++) {
                document.write("<td>"a*b"</td>");
        }
        document.write("</tr>");
        }
    </script>
    </body>
    </html>

我浏览了张贴的问题，但找不到答案，可能是因为我是初学者，大部分内容都不懂。

【问题讨论】：

document.write("<td>" + (a*b) + "</td>");?
确实，您必须使用 + 符号正确连接字符串。

标签： javascript for-loop html-table

【解决方案1】：

嗯，首先你应该将 tr（行）和 td（单元格）插入到表格元素中......类似

document.write("<table>");
// your loop here
document.write("</table>");

不过，有更好的方法来做到这一点！

【讨论】：

很高兴它成功了！ :) 您介意将答案标记为正确吗？这对我来说意义重大，谢谢:)

【解决方案2】：

使用'+' 连接。

<!DOCTYPE>
<html>
<head>
<title>Table</title>
</head>
<body>
<script language="javascript" type="text/javascript">
for (var a=0; a < 10; a++) {
document.write("<tr>");
for(var b=0; b<10; b++) {
document.write("<td>"+(a*b)+"</td>");
}
document.write("</tr>");
}
</script>
</body>
</html>

【讨论】：

【解决方案3】：

<!Doctype html>
<html>
<head>
<script type="text/javascript">
function table()
{
	this.calcmul = calc;
}
 function calc(arg1,arg2)
 {
		var multi = (arg1 * arg2);
		return multi;	
 }
 var table2 = new table();  
</script>
</head>
<body>
<table border="solid 2px;" style="font-size:50px;">
	<thead><tr>
			<script>
			for(var j=1; j<=10; j++)
			{
				document.write("<th><label style='color:red;'>"+i+"</label></th>");
			}
			</script>
			</tr>
	</thead>
	<tbody>
		<script type="text/javascript">	
for(var i =1; i<=10; i++)
{
	document.write("<tr>");
	for(var k=1; k<=10; k++)
		{
			var arg1 = i;
			var arg2 = k; 
			document.write("<td>"+table2.calcmul(arg1,arg2)+"</td>");	
		}
	document.write("</tr>"); 
}	
</script>
	</tbody>
</table>
</body>
</html>

【讨论】：

【解决方案4】：

<!DOCTYPE html>
<html>
<head>
<script>
 function calc(arg1,arg2)
 {
		var multi = (arg1 * arg2);
		return multi;	
 }
</script>
</head>
<body>
<table border="solid 2px;" style="color:black;font-size:50px;">
	<thead><tr>
			<script>
			for(var j=1; j<=10; j++)
			{
				document.write("<th>"+i+"</th>");
			}
			</script>
			</tr>
	</thead>
	<tbody>
<script>
for(var i =1; i<=10; i++)
{
	document.write("<tr>");
	for(var k=1; k<=10; k++)
		{
			var arg1 = i;
			var arg2 = k; 
			document.write("<td>"+calc(arg1,arg2)+"</td>");	
		}
	document.write("</tr>"); 
}	
</script>
	</tbody>
</table>
</body>
</html>

【讨论】：

【解决方案5】：

<div id="yr" class="year"></div>
function year(){
    var test = '<table border="1px"><thead><tr><th><</th><th colspan="2">2015-2016</th><th>></th><tr></thead><tbody>';
    var tr='';
    for(var i=0;i<4;i++){
        tr += '<tr>';
        for(var j=0;j<4;j++){
            tr += '<td>'+2015+'</td>';
            }
        }
        tr +='</tr>';
    test += tr;
    return document.getElementById('yr').innerHTML = test;
}
year();

【讨论】：

固定行和列

【解决方案6】：

<!DOCTYPE html>
<html>
<head>
<script>
 function calc(arg1,arg2)
 {
		var multi = (arg1 * arg2);
		return multi;	
 }
</script>
</head>
<body>
<table border="solid 2px;" style="color:black;font-size:50px;">
	<thead><tr>
			<script>
			for(var j=1; j<=10; j++)
			{
				document.write("<th>"+i+"</th>");
			}
			</script>
			</tr>
	</thead>
	<tbody>
<script>
for(var i =1; i<=10; i++)
{
	document.write("<tr>");
	for(var k=1; k<=10; k++)
		{
			var arg1 = i;
			var arg2 = k; 
			document.write("<td>"+calc(arg1,arg2)+"</td>");	
		}
	document.write("</tr>"); 
}	
</script>
	</tbody>
</table>
</body>
</html>

【讨论】：