Calendar Loop Beginner 2

squeekywheel · Aug 19, 2005

I want to make a calendar of my own, not because I need it but because I would like to know how it works and also so I can get better at javascript. I have looked at several scripts in js but the part where the loop makes the cells confuses me. What is the methodoligy if you will of making the cells go across for 7 columns and then down 4 or 5 rows. Can someone explain this to me?

yenping · Aug 19, 2005

hi, can you show the js script you have that make the loops.

Normally, the outer loop produces rows, and the inner loop makes the columns...

(outer loop)
for(i=0;i<inum;i++){
......(some codes that go row by row)
(inner loop)
for(j=0;j<jnum;++j){
.....(some codes that deploy columns)
}
}

Lrnmore · Aug 19, 2005

This example uses the 2 loops yenping references.
One loop building the rows, one the cells inside the row.

Our outside loop happens to be a "while" loop, with the row being increased with the line "row++".

Also, we start the inner loop with a -1 so that we can list
our multiplier in the first column.

I hope this helps with your question, shout back if you need more.

Sometimes when you work on something like this it helps if you put in an "alert" I've left that in this example as well.

Code:

<html>
<head>
  <title>Make Table</title>
<style type="text/css">
table { background-color: #0000FF; }

td { background-color: #FFFFFF;
     font-family: arial;
     font-size: 16px;
     padding: 12px;  }
     
.corner { background-color: #D3D6CD; }     
</style>  
<script type="text/javascript">
var x = [2, 4, 6, 8, 10];
var y = [3, 5, 7, 9, 11, 13];

function mkTable(){
var row = 0; //this variable will track our rows
var htmlStr = '<table>\n<tr><td class="corner">&nbsp;</td>\n';
    for(var j = 0; j < x.length; j++){
    htmlStr += '<td>' + x[j] + '</td>';
    }
    htmlStr += '</tr>\n';
            //while loop builds our rows
    while(row < y.length){
       htmlStr += '<tr>';
            //for loop builds the cells of the row
          for(var i = -1; i < x.length; i++){
              if(i == -1){
              htmlStr += '<td>' + y[row] + '</td>';
              continue;
              }
          htmlStr += '<td>' + (x[i] * y[row]) + '</td>';
          }
        htmlStr += '</tr>\n';
        row++;        
    }
    htmlStr += '</table>\n';
document.write(htmlStr);
alert(htmlStr);
}
</script>  
</head>
<body>
      <script type="text/javascript">
      mkTable();
      </script>
</body>
</html>

Thanks,

A great place to visit is w3 Schools.

squeekywheel · Aug 19, 2005

Thx for the help, I will take this and rattle my brains with it for the next few days or until i get it, then I am sure I will have new problems to tackle. Again, thanks for the help.

Lrnmore · Aug 20, 2005

You're welcome.
You come back if you run across a tough spot.

Thanks,

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Calendar Loop Beginner 2

squeekywheel

Programmer

yenping

MIS

Lrnmore

Technical User

squeekywheel

Programmer

Lrnmore

Technical User

Similar threads

Part and Inventory Search

Sponsor