在Javascript中使用for循环创建表

时间:2014-02-26 12:58:43

标签: javascript for-loop html-table

我正在尝试使用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>

我查看了已发布的问题,但找不到答案,可能是因为我是一名初学程序员而且对大部分内容都不了解。

6 个答案:

答案 0 :(得分:1)

使用'+'来结束。

<!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>

答案 1 :(得分:1)

那么,首先你应该将tr(行)和td(单元格)插入到表格元素中......类似于

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

但是有更好的方法可以做到这一点!

答案 2 :(得分:0)

<!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>

答案 3 :(得分:-2)

&#13;
&#13;
<!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>
&#13;
&#13;
&#13;

答案 4 :(得分:-2)

<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();

答案 5 :(得分:-3)

&#13;
&#13;
<!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>
&#13;
&#13;
&#13;