Multiplication Table code

Program works, I just need to get some color

Page 1 of 1

3 Replies - 18121 Views - Last Post: 17 February 2009 - 04:52 PM

#1 happycamper  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 163
  • Joined: 11-November 08

Multiplication Table code

Posted 17 February 2009 - 03:00 PM

The program works correctly. It is intended to ask the user how many rows and columns and then print out the entire table. So, then when formatting, I need to have colors in the cells. I cannot figure that one out, which is odd because it seems like the easiest part of the whole thing.

What I've tried so far:

I tried to create a class for CSS based on whether the number in the cell was even or odd. Then, with CSS assign a color to the cell based on the class. Needless to say, it isn't working.

HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Eric Mobley - Multiplication Table</title>



<script src="script.js"
	type = "text/javascript"
	language="javascript"></script>
	
 <style type="text/css"> 
.even {color: blue }
.odd {color: green }
</style>	


</head>
   
<body>
</body>
</html>


Javascript code:

window.onload = table;

function table()
{
	var rows = prompt("Enter number of rows");
	var cols = prompt("Enter number of columns");

// this will hold the generated code to put into the html
	var html = "";
	// holds whether the current cell if even or odd, 
	// if even the cell is blue, if odd the cell is green
	var evenOdd; 
	
	document.write("<h1>Lab 5 Part 3</h1>");
	
	// start constructing table
	html += "<table>";
	html += "<tr>";
	
	// print column headers
	for (i = 0; i <= cols; i++)
	{
		var evenOdd = i % 2;
		if (evenOdd == 0)
			html += ("<td class=even width=50px><b>" + i + "</b></td>");
		else
			html += ("<td class=odd width=50px><b>" + i + "</b></td>");
	}
	
	html += "</tr>"; 
	
	for (i = 1; i <= rows; i++)
	{
		// this creates the row number
		html += ("</br><tr><td width=35px><b>" + i + "</b></td>"); 
		
		for (j = 1; j <= cols; j++)
		{
			var number = i * j;
			html += ("<td>" + number + "</td>");
		}
		html += "</tr>";
	}
		 html += "</table>";
	

	document.write(html); 
	
}


PS Please forgive my spaghetti code!

This post has been edited by happycamper: 17 February 2009 - 04:05 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Multiplication Table code

#2 happycamper  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 163
  • Joined: 11-November 08

Re: Multiplication Table code

Posted 17 February 2009 - 04:32 PM

Upon further investigation, I have discovered the my script seems to be completely overriding the html within the multTables.htm file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Eric Mobley - Multiplication Table</title>
  
<style type="text/css"> 
.even {color: blue }
.odd {color: green }
</style>  


<script language="Javascript" type="text/javascript" src="script.js"></script>
</head>
   
<body>

<p>Testing</p>
</body>
</html>


In the above code, the title does not appear and the <p>testing</p> does not appear. This is lets me know that the style sheet does not work. I have no idea why but the script is wiping out everything I originally did in the multTables.htm file. Any ideas?????
Was This Post Helpful? 0
  • +
  • -

#3 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1155
  • View blog
  • Posts: 7,167
  • Joined: 07-September 06

Re: Multiplication Table code

Posted 17 February 2009 - 04:45 PM

This works for me, IE 7:
<style type="text/css"> 
.even {color: #99f }
.odd {color: #0f0 }
</style> 

<script>
function table()
{
	var rows = prompt("Enter number of rows");
	var cols = prompt("Enter number of columns");

// this will hold the generated code to put into the html
	var html = "";
	// holds whether the current cell if even or odd, 
	// if even the cell is blue, if odd the cell is green
	var evenOdd; 
	
	document.write("<h1>Lab 5 Part 3</h1>");
	
	// start constructing table
	html += "<table>";
	html += "<tr>";
	
	// print column headers
	for (i = 0; i <= cols; i++)
	{
		var evenOdd = i % 2;
		if (evenOdd == 0)
			html += ("<td class=even width=50px><b>" + i + "</b></td>");
		else
			html += ("<td class=odd width=50px><b>" + i + "</b></td>");
	}
	
	html += "</tr>"; 
	
	for (i = 1; i <= rows; i++)
	{
		// this creates the row number
		html += ("</br><tr><td width=35px class='"+((i%2==0)?'even':'odd')+"'><b>" + i + "</b></td>"); 
		
		for (j = 1; j <= cols; j++)
		{
			var number = i * j;
			var evenOdd = number % 2;
			html += ("<td class='"+((evenOdd==0)?'even':'odd')+"'>" + number + "</td>");
		}
		html += "</tr>";
	}
		 html += "</table>";
	

	document.write(html); 
	
}
table();
</script>


Hope that helps.
Was This Post Helpful? 0
  • +
  • -

#4 happycamper  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 163
  • Joined: 11-November 08

Re: Multiplication Table code

Posted 17 February 2009 - 04:52 PM

Thank you for taking some time to help.

I also figured out that if I abandon document.write(); and replace it with document.getElementById() it works much better. I don't really understand the difference between those but document.write() over writes all my stuff in the htm file but document.getElementById() does not. Hurray.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1