Tuning in from the previous two recipes? Great! The superhero saga is about to be tabled, and you are just in time for today's exciting episode where we really get loopy on our heros!
We will create a table in memory and for each hero, build a tr
with a td
in it and finally inject the HTML table into the DOM.
<h1>World's Coolest Superheroes</h1> </div> <form action="javascript:" method="get" id="my_form"> <input id="submit" type="button" value="Add a TABLE"/> </form> <script type="text/javascript"> var other_heroes = ['Spider-Man', 'Iron Man', 'Hulk', 'Captain America', 'Daredevil', 'Wolverine', 'Squirrel Girl']; var next = 0; var total = other_heroes.length; $('submit').addEvent('click', function() { add_hero_table(); }); function add_hero_table() { // create a new table element var my_hero_table = new Element('table',{ 'border':1 }); // for each hero, build a tr with a td in it for each hero other_heroes...