admin管理员组

文章数量:1287556

I am trying to create a simple times table in a html document using Javascript. This is my code so far:

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

I looked through the posted questions, but could not find an answer, possibly because I am a beginner programmer and did not understand most of it.

I am trying to create a simple times table in a html document using Javascript. This is my code so far:

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

I looked through the posted questions, but could not find an answer, possibly because I am a beginner programmer and did not understand most of it.

  • javascript
  • for-loop
  • html-table
Share Improve this question edited Aug 10, 2017 at 17:33 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Feb 26, 2014 at 12:58 user3294625user3294625 291 gold badge1 silver badge5 bronze badges 2
  • 1 document.write("<td>" + (a*b) + "</td>");? – thefourtheye Commented Feb 26, 2014 at 12:59
  • 1 Indeed, you have to concatenate your strings properly using the + sign. – Dimitri Mestdagh Commented Feb 26, 2014 at 13:19
Add a ment  | 

8 Answers 8

Reset to default 2

Well, first of all you should insert the tr (rows) and td (cells) into a table element... Something like

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

There are better ways to do this, though!

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

use '+' to concate.

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

var students = [`Ahsan`,`Ali`,`Moiz`,`Raza`,`Zia`];
var rollNums = [10,20,30,40,50];
document.write(`<table>
<th>Student Name</th>
<th>Roll Num</th>`)
for (var i = 0 ; i < students.length ; i++){
    document.write(`
    <tr>
        <td>${students[i]}</td>
        <td>${rollNums[i]}</td>
    </tr> <br />`)
};
document.write(`</table>`)

This might be another way of creating table using Vanilla Javascript without any tag

var table = document.createElement('table')
table.setAttribute('border', 1) // optional styling
var body = table.createTBody()

for (var a = 0; a < 10; a++) {
  var row = body.insertRow(a)
  for (var b = 0; b < 10; b++) {
    row.insertCell(b).innerText = (a + 1) * (b + 1)
  }
}

document.body.appendChild(table)
<!DOCTYPE>
<html>
  <head>
    <title>Table</title>
  </head>
  <body></body>
</html>

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

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


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

本文标签： Creating table using for loop in JavascriptStack Overflow

版权声明：本文标题：Creating table using for loop in Javascript - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741249775a2365575.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。