View Full Version : How to generate Mathematical tables with Javascript

01-15-2012, 05:59 PM
You are required to design a HTML web page which can generate and display simple Mathematical table(s) with the help of JavaScript, by getting input from users.

1. Create HTML tables, input text fields and submit buttons.
2. Perform Input text field validation through JavaScript.
3. Use of if-else and loops in JavaScript.
4. Create and use functions in JavaScript.
5. Generate HTML tables dynamically.

Please read the instructions carefully.
1. Your assignment must be in HTML format; any other format even simple text files (notepad files) will not be accepted.
2. Open notepad, write your code in this new file and save it. While it asks for file name, use starting and ending double quotes to save the file in HTML format like “VUID.html”.
3. Create a function ValidateStartField to validate the start input field. Use onChange event in this function.
4. Create a function ValidateEndField to validate the end input field. Use onChange event in this function.
5. Create a function ValidateSizeField to validate the depth/size field. Use onChange event in this function.
6. Create a function GenerateTables and write the code to generate math tables.
7. Create a function DisplyTable and write the code to display a math table on HTML page.
8. To create HTML elements with the help of JavaScript pass HTML code to document.write( ) function as string. For example if you want to create HTML table with the help of JavaScript write
document.write( “<table border="1"><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table>” );
9. For more details see screen shots.


I shall be very thankfull to you if you give me solution of this task.

01-16-2012, 05:02 PM
I don't know if you know how funny this is tigeronline.
Post your code and we will help you with problems, but if you want someone to write it for Hire a programmer.

01-16-2012, 05:12 PM
I don't know if you know how funny this is tigeronline.
Post your code and we will help you with problems, but if you want someone to write it for Hire a programmer.

I think several ppl from the same class has posted this same question..lol

Or possibly the same guy with two different names. The other guy seemed to have some code already though.

01-16-2012, 05:21 PM
I think several ppl from the same class has posted this same question..lol

Hahaha! www.codingforums.com/ is on some bulletin board just down the hall from that class. :rolleyes:

01-16-2012, 06:11 PM

You mean like this on a bulletin board?


Just kidding. If I should take this down, please tell me. Just adding to the light humor. :)



01-16-2012, 06:41 PM
please friends help me. i am working on it for 2 days but unable to create this.

01-16-2012, 06:50 PM
Hi tigeronline,

Welcome to CodingForums. What you have in mind takes more than html by itself. It's going to take javascript, more likely ajax script.

May I ask, what did you use to allow you to take screen shots of it? Or are these scans from a book? Perhaps someone here can steer you where you need to find help. I think this would be better posted on the javascript board.

MOST IMPORTANT: tigeronline, you need to read the Rules (http://www.codingforums.com/rules.htm) & Posting Guidelines (http://www.codingforums.com/postguide.htm). Tip: * You're not supposed to ask for homework help. You could get in trouble with your teacher.

* Some help here and there would be fine, but not your entire assignment.


Your friend,


01-16-2012, 07:11 PM
please friends help me. i am working on it for 2 days but unable to create this.

tigeronline, you should read the forum rules about posting homework assignments. While asking for help even on homework assignments is ok, you need to show some initiative on trying to code this yourself. Show what you've done coding wise, and explain whats not working about YOUR code.

In other words, ppl here wont do the work for you.

01-17-2012, 08:41 AM
i done it but tables are not shown as given in asignment.
please help me regarding this. or if there is any other problem please guide me. r
Here is the coding which i have done.

<script language="javascript" type="text/javascript">

function checkform()
window.alert("Start Text box is empty");

window.alert("End Text box is empty");

window.alert("Depth/Size Text box is empty");

function GenerateTables(){
var start = document.tables.start.value;
var end = document.tables.end.value;
var size = document.tables.size.value;

for (start; start <= end; start++) {
document.write("<table width='100' align='center'>")
document.write("<caption><b>Table of </b>" + start + "</caption><br>")

for (var i = 1; i <= size; i++) {

document.write("<table border=1 align='center'>")
document.write("<tr height=40 align='center'>")
document.write("<td width=40 align='center'>" + start + "</td>")
document.write("<td width=40 align='center'> * </td>")
document.write("<td width=40 align='center'>" + i + "</td>")
document.write("<td width=40 align='center'> = </td>")
document.write("<td width=40 align='center'>" + start * i + "</td>")

<form name="computer" method="post" action="function GenerateTables()">
<table border="2">

<td><input type="text" size="25" name="saba1"></input></td>

<td><input type="text" size="25" name="saba2"></input></td>

<td><input type="text" size="25" name="saba3"></input></td>

<td><input type="submit" value="GenerateTables" name="saba4" onMouseOver="checkform()"></input></td>


Philip M
01-17-2012, 08:49 AM
Do please read the posting guidelines as requested.

When posting here please help us to help you by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar. You can (and should) edit your previous post.

If I were you I would look at http://www.codingforums.com/showthread.php?t=248891 post #5 for an explanation of why your assignment as specified above is impossible.

<script language="JavaScript"> is long deprecated and obsolete. Use <script type = "text/javascript"> instead. The <!-- and //--> comment (hiding) tags have not been necessary since IE3 (i.e. since September 1997). If you see these in some published script it is a warning that you are looking at ancient and perhaps unreliable code.

01-17-2012, 09:39 AM
Also document.write became obsolete for use in web pages when Netscape 4 dies (approximately 2005) so any script intended to run in a web page that uses document.write should have been rewritten around 6 or 7 years ago to get rid of thiose statements. The document.write statement only works in certain situations and can easily cause script clashes and broken web pages. The modern replacements can be completely unobtrusive and the page will still work properly with JavaScript disabled.

If you are interested in how you should be adding tables to HTML from JavaScript then the example that I just uploaded to http://javascriptexample.net/domtable12.php shows you the JavaScript commands needed to add a table into HTML in a completely unobtrusive manner. It doesn't generate the exact multiplication table from the assignment that the various threads here are asking about but the principle is the same - only the number of columns and rows and the table content is different.

01-17-2012, 05:21 PM
Some points
1. Don't use onmouseover for a button. Things went all to hell when I first ran this script. :) Use onclick. BTW lower case is preferred.
2. When checking for empty fields with a submit button, use a return so the form don't execute.
3. You need id's in the text field also so you can use var start = document.getElementById('saba1').value; instead of var start = document.tables.start.value; which is incomplete.

You have the ending } for your first function in the wrong place.