/prog/ - Javascript - Tables

Name: Anonymous 2011-03-02 23:14

Hey, haven't been to this board before. Anyway, getting into Javascipt... And I'm trying to populate a table with the numbers 1-10, their squares, and cubes. Can someone please help me out?

What I have so far:

<script type="text/javascript">

</script>

With this in <body>:

<table id="num_table" border="5" width="50%"
   summary="Numbers, Their Squares & Cubes">
   <thead>
      <tr>
   <th>Number</th>
   <th>Square</th>
   <th>Cube</th>
      </tr>
   </thead>
   <tbody>
   </tbody>
</table>

Tried writing the script a few different ways with no luck. Didn't really want to use variables to insert rows/cells but most of the examples I've seen do it, so eh... Thanks in advance!

Name: Anonymous 2011-03-03 13:10

Hey. I'm >>13
Actually, I didn't answer your question.

>>1
Despite the fact that it's ugly, your code actually WORKS. The problem is WHEN it works.

When you write a script in a <script> element in the <head>, the script is executed the moment the head is loaded. By that time, the body would not have been loaded yet. That means that the table you're looking for still does not exist, so the script fails to find it.

In order to make the script work after the whole document has been loaded, you have to use the onload event. Like this:

onload = myFunction;

Where myFunction is the function you want to run when the onload event occurs. You can do this in multiple ways. For starters:

<html>

<head>

<script>

function myFunction() {

  num_table = document.getElementById("num_table");

  

  for (i=0; i<10; i++) {

    new_row = num_table.insertRow(-1);

    new_row.inserCell(-1).innerHTML = i;

    new_row.inserCell(-1).innerHTML = i*i;

    new_row.inserCell(-1).innerHTML = i*i*i;

  }

}





onload = myFunction;



/*

Notice how we DIDN'T use () after the function's name,

because that would call it right away. We don't want to CALL

the function; we just want to TELL its name to the onload event

so it can call it when the time comes.

*/



</script>

</head>

<body>

<table id="num_table"></table>

</body>

</html>

Personally, I wouldn't like to have a named function if I'm only gonna use it once. I'd use an anonymous function instead:

onload = function() {

  num_table = document.getElementById("num_table");

  

  for (i=0; i<10; i++) {

    new_row = num_table.insertRow(-1);

    new_row.inserCell(-1).innerHTML = i;

    new_row.inserCell(-1).innerHTML = i*i;

    new_row.inserCell(-1).innerHTML = i*i*i;

  }

}

This is effectively the same as creating a named function and using its name.

There's one more thing left. The onload event actually doesn't occur until the ENTIRE document is loaded, including all the stylesheets and images; not just the HTML file. If you want the script to run right after the HTML document has been loaded, well, you can, but I'd recommend using jQuery. jQuery is a library that will make your web programming a much more pleasant and effective task.

http://jquery.com/

Note that in order to be a powerful JavaScript programmer, you have to master a lot of things. You have to understand how the JavaScript parser works. You have to understand the DOM (Document Object Model). Google is your friend.

Good luck.

Javascript - Tables

1 Name: Anonymous 2011-03-02 23:14

14 Name: Anonymous 2011-03-03 13:10

Name: Anonymous 2011-03-02 23:14

Name: Anonymous 2011-03-03 13:10