Member Avatar for Dwillich87

Hey,

I was given a task for a class to make a table that shows 1-10 in the first column, the square of 1-10 in the next column and the cube of 1-10 in the last column. Well I got it to work it just looks sloppy to me and how would I add any additional rows without it showing more value?

Thanks

Dean

function squareCube() { 	
	document.write("<table>");
			
		for (rowNum=0; rowNum < 11; rowNum++) {
			document.write("<tr>");
			
			for (colNum=1; colNum < 2; colNum++) {
				x = Math.pow(rowNum, 2);
				y = Math.pow(rowNum, 3);
				document.write("<td>"+rowNum+"</td>");
				document.write("<td>"+x+"</td>");
				document.write("<td>"+y+"</td>");
			}
		
			document.write("</tr>");	
		}
			

	document.write("</table>");
}
  • 4 Contributors
  • 5 Replies
  • 88 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by Troy III
Member Avatar for stbuchok

This is how I'd do it (this is only though if I know the upper and lower bounds):

<html>

<head>

<style>

table
{
	border: 1px solid #000000;
	border-collapse: collapse;
}

td
{
	width: 25px; 
	font-weight: bold; 
	text-align: center;
	border: 1px solid #000000;
}

</style>

</head>

<body>


<script>

var columns = [1, 2, 3];
var rows = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

document.write('<table>');

for(var row in rows){

	document.write("<tr>");	

	for(var col in columns){
		var num = Math.pow(row, col);

		document.write('<td>' + num +'</td>');
	}

	document.write("</tr>");
}

document.write("</table>");

</script>
</body>

</html>
Member Avatar for Taywin

What you are doing is fine if you call the function only once. There are a couple things to be modified though...

function squareCube(selectRowNum, selectPower) {
  var rowNumber=10;  // default is 10
  var powNumber=3;   // default power is 3

  // if the value is a number and greater than 0
  if (!isNaN(selectRowNum) && selectRowNum>0) {
    rowNumber = selectRowNum;
  }
  // if the value is a number and greater than 0
  if (!isNaN(selectPower) && selectPower>0) {
    powNumber = selectPower;
  }

  // notice that I use "writeln" instead in order to insert a new line at the end
  // of each call in the "view source"
  document.writeln("<table>");
  // notice it starts from 1
  // notice that I declare the "rowNum" as local variable
  // notice that I use the upper bound of incoming value
  for (var rowNum=1; rowNum < rowNumber; rowNum++) {
    document.writeln("<tr>");
    document.writeln("<td>"+rowNum+"</td>");

    // notice that I declare "powVal" as local variable
    // notice that I use the upper bound of power value
    for (var powVal=2; powVal<=powNumber ; powVal++) {
      document.writeln("<td>"+Math.pow(rowNum, powVal)+"</td>");
    }
    document.writeln("</tr>");	
  }
  document.writeln("</table>");
}
Edited by Taywin because: n/a
Member Avatar for Troy III 
function toPower(o,n,i,x){ 
      !n?(n=10,i=1) : i+=1;
      !toPower.x?toPower.x="":0
          if( i <= n ){ toPower[i]=
		"<tr align=right><td>" + i + "<\/td><td>" +
                   Math.pow( i, 2 ) + "<\/td><td>"+
                   Math.pow( i, 3 ) + "<\/td><\/tr>";
	toPower.x += toPower[i];
	return toPower( o,n,i,toPower.x ) }
	else{
	document.write( "<table>" + x + "<\/table>");
	}
   }

toPower(0,15,0)

If any questions just ask.
p.s.:
Using onload=toPower will fallback to 10 rows a table

Member Avatar for Taywin

@TroyIII

You implemented the function in recursive which could be easily implemented in iterative fashion. It is a lot more obscure for beginner to understand (and obvious that the OP is one). Also, you have no comment at all in your code... Furthermore from the way the OP implemented, I believe the OP may want to add more flexibility in number of row as well as power. Yours is for rows only.

One more downside is that a recursive function can take all resources available in computation a lot faster than an iterative function (and JavaScript is a scripting language which is slow). I am not really sure that this approach is necessary.

Edited by Taywin because: n/a
Member Avatar for Troy III

@TroyIII

1. You implemented the function in recursive which could be easily implemented in iterative fashion.

2. It is a lot more obscure for beginner to understand (and obvious that the OP is one). Also, you have no comment at all in your code...

3. Furthermore from the way the OP implemented, I believe the OP may want to add more flexibility in number of row as well as power. Yours is for rows only.

4. One more downside is that a recursive function can take all resources available in computation a lot faster than an iterative function (and JavaScript is a scripting language which is slow). I am not really sure that this approach is necessary.

That's to much of a nonsense for one [plain (solution) points theft] occasion.

1. I don't misuse the "for" loops when not necessary.
2. That's why the note: "if any questions..." in my reply stands for!
3. Wrong: "how would I add any additional rows without it showing more value?" stands for expanding the rows but restricting columns. Meaning: The task requires fixed number of columns, [powers 1,2,3] but variable number of rows.
4. Recursions are more flexible; more programmable; meaning: more control. The Loop takes up more resources because loop process is more aggressive.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.