Display Table in Java Script

-- Leave a Comment
Here is a Java Script to display a table. To display a table always remember to set table row in first loop and table data in second loop. The loop will horizontal as per in the table. So make the inner loop in such way that it will display data in next column. Though here is only one loop.


JavaScript Display Possibilities
  • JavaScript can "display" data in different ways:
  • Writing into an HTML element, using innerHTML.
  • Writing into the HTML output using document.write().
  • Writing into an alert box, using window.alert().
  • Writing into the browser console, using console.log().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>
<head>
 <title>Display a table</title>
</head>
<body>
 <script>
 var i = 0;
 var j = 0;
 document.write("<table border='1'>");
  document.write("<tr>");
   document.write("<th> S.No </th>");
   document.write("<th> Input </th>");
   document.write("<th> Output </th>");
  document.write("</tr>");
 for(i=1;i<6;i++)
 {
  document.write("<tr>");
   document.write("<td>" + i + "</td>");
   document.write("<td>" + (i+4) + "</td>");
   document.write("<td>" + (i+4)*(i+4) + "</td>");
  document.write("</tr>");
 }
 document.write("</table>");
 </script>
</body>

For Better Understanding of the loops for table  in Java Script There is another Multiplication table below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
 <title>Display a table</title>
</head>
<body>
 <script>
 var i = 0;
 var j = 0;
 document.write("<table border='1'>");
        for(i=1;i<11;i++)
        {
          document.write("<tr>");
          for(j=1;j<11;j++)
          {
            document.write("<td>"+j+"*"+i+"="+(j*i)+"</td>");
          }
          document.write("</tr>");
        }
        document.write("</table>");
 </script>
</body>

As in the above loop we Use j*i Which makes the inner loop * outer loop as outer loop will changed as 10 inner loop so will display as 1*1=1 then in next row 2*1=2 ..... 10*1=10 Got it?
If something is wrong or Need more clarification  Please contact me: info[at]devkotasagar.com.np.

Hello This is Sagar Devkota. Studying Bachelor of Software Engineering at Pokhara University, NCIT. Open Source Enthusiastic.

0 comments:

Post a Comment