我对面向对象的 javascript 非常陌生，有使用 python 和 java 编写 gui 的经验。我正在尝试创建可以放置在整个网页中的位置的 html 表。每个 html 表格将有两个 css 布局来控制它是否被选中。如果我只有一张桌子，我可以编写所有的交互。当我有多个表时，它会变得混乱。我想知道如何将这些表格放置在整个空白网页中，然后单独访问这些表格。我想我无法理解继承和层次结构在 javascript/html 中的工作原理。
注意：我不是在问如何制作一张桌子。我正在尝试动态创建多个表并将它们放置在整个网页中。然后独立访问他们的 css 并更改它（将它们移动到不同的位置或改变外观的方式，独立于其他表）。
【问题讨论】：
标签： javascript html oop object design-patterns
假设您想要实时进行更改并且您愿意使用像 jQuery 这样的库，只需将表格附加到文档并为每个表格分配一个唯一的 CSS id。无论您的表格生成代码发生在哪里，只需保留一个计数器并将 id 设置为“mytable+counter_val”之类的东西。
您可以从那里引用每个表并使用 jQuery 方法根据自己的喜好调整 CSS。
一个简单的例子：
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);
如果您将选中和未选中分为一个类，您可以添加/删除该类：
// table 2 is now displayed as being selected
$("#mytable_1").addClass("selected");
// table 2 is now displayed as being unselected
$("#mytable_1").removeClass("selected");
有关更多信息，请参阅 jQuery 文档：http://docs.jquery.com/Main_Page
【讨论】：
我不明白在您的问题中需要 oop 原则。为什么需要继承和层次结构来生成几个元素，然后更改它们的一些道具？
如果我理解正确，您会想要跟踪您创建的每个表，以便以后更改它的 css 道具。
如果您想使用 js 作为面向对象的语言，我会为表对象编写一个类定义：var Table = function(innerHTML,container){
this.innerHTML = innerHTML;
this.container = container;
}
//static member
Table.TABLES = [];//global reference to all the tables created
Table.prototype = {
init : function(){
this.dom = document.createElement('table');
this.dom.innerHTML = this.innerHTML;
this.container.append(this.dom);
Table.TABLES.add(this);
},
setCssProp : function(name,value){
this.dom.style.setProperty(name,value);
}
}
然后您所要做的就是创建一个新表并启动它：(new Table(table_content_here)).init();,
稍后您可以通过访问 Table 类中的 TABLES 来引用它：for (var i in Table.TABLES)
Table.TABLES[i].setCssProp(cssName,cssValue);
我知道您知道如何创建表，我只是建议您保留对您创建的表的全局引用，以便以后访问它们。
【讨论】：