Question

I am very new to object orientated javascript, with experience writing gui’s in python and java. I am trying to create html tables that I can place in locations throughout a webpage. Each html table would have two css layouts that control if it is selected or not. I can write all of the interaction if I only have one table. It gets confusing when I have multiple tables. I am wondering how to place these tables throughout a blank webpage and then access the tables individually. I think I am having trouble understanding how inheritance and hierarchy works in javascript/html.

NOTE: I am not asking how to make a table. I am trying to dynamically create multiple tables and place them throughout a webpage. Then access their css independently and change it (move them to different locations or change the way the look, independently of the other tables).

Answer 1

Assuming you want to make changes in real-time and you’re willing to use a library like jQuery, simply append the table(s) to the document and give each one a unique CSS id. Wherever your table generation code is taking place, just keep a counter and set the id to something like “mytable+counter_val”.

From there you can reference each table and use jQuery methods to adjust the CSS to your liking.

A brief example:

var container_id = "#the_parent";

for (var i = 0; i < 10; ++i) {
 var table_id = "mytable_" + i;
 var table_code = "<table id=" + table_id + "></table>";
 $(container_id).append(table_code);
}

// set border on table 7 (indexing at 0)
$("#mytable_6").css("border", "5px solid red");

// move table 5 (indexing at 0)
$("#mytable_4").css("top", "300px");

// animate table 2 (indexing at 0)
$("#mytable_1").animate({left : 300, top: 125}, 2000);

If you have the difference between selected and unselected separated into a single class, you can just add/remove that class:

// table 2 is now displayed as being selected
$("#mytable_1").addClass("selected");

// table 2 is now displayed as being unselected
$("#mytable_1").removeClass("selected");

See the jQuery docs for more information: http://docs.jquery.com/Main_Page