Creating table using for loop in Javascript

Question

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.

Indeed, you have to concatenate your strings properly using the + sign. — Dimitri Mestdagh
– Dimitri Mestdagh, Commented Feb 26, 2014 at 13:19

Luca · Accepted Answer · 2014-02-26 13:04:00Z

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!

answered Feb 26, 2014 at 13:04

Luca

1,1722 gold badges16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Luca Over a year ago

Glad it worked! :) would you mind flagging the answer as the correct one please? It means a lot to me, thank you :)

Selvam M Kuppuswamy · Accepted Answer · 2015-08-31 18:04:30Z

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

TKV · Accepted Answer · 2014-02-26 13:00:52Z

1

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>

answered Feb 26, 2014 at 13:00

TKV

2,70111 gold badges44 silver badges56 bronze badges

Comments

Muhammad Ahsan Khan · Accepted Answer · 2023-05-12 14:53:09Z

0

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>`)

edited May 12, 2023 at 14:53

answered May 12, 2023 at 12:32

Muhammad Ahsan Khan

11 bronze badge

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Priya · Accepted Answer · 2023-09-11 16:32:54Z

0

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>

edited Sep 11, 2023 at 16:32

answered Sep 10, 2023 at 18:36

Priya

1,5541 gold badge14 silver badges33 bronze badges

Comments

Selvam M Kuppuswamy · Accepted Answer · 2015-08-31 18:00:59Z

-2

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

answered Aug 31, 2015 at 18:00

Selvam M Kuppuswamy

271 bronze badge

Comments

Noy · Accepted Answer · 2016-02-16 11:22:41Z

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

edited Feb 16, 2016 at 11:22

Noy

1,2682 gold badges11 silver badges28 bronze badges

answered Feb 16, 2016 at 11:05

vijay

3063 silver badges12 bronze badges

1 Comment

vijay Over a year ago

Fixed rows and columns

harika · Accepted Answer · 2017-10-13 10:12:36Z

-3

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

answered Oct 13, 2017 at 10:12

harika

17 bronze badges

Collectives™ on Stack Overflow

Creating table using for loop in Javascript

8 Answers 8

1 Comment

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related