Question

我是面向对象的javascript的新手，有在python和java中编写gui的经验。我正在尝试创建html表格，我可以将其放置在整个网页的位置。每个html表都有两个css布局，可以控制它是否被选中。如果我只有一个表，我可以编写所有的交互。当我有多个表时，它会变得混乱。我想知道如何将这些表放在一个空白的网页中，然后单独访问这些表。我想我无法理解javascript / html中的继承和层次结构是如何工作的。

注意：我不是在问如何制作一张桌子。我正在尝试动态创建多个表并将它们放在整个网页中。然后独立访问他们的css并更改它（将它们移动到不同的位置或改变外观的方式，独立于其他表格。）

Answer 1

假设您想要实时进行更改并且您愿意使用类似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

Answer 2

我不明白你的问题需要oop原则。为什么你需要继承和层次结构来生成几个元素，然后改变他们的一些道具？如果我理解为corectly，你会想要跟踪你创建的每个表，以便以后可以更改它的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);
我知道你知道如何创建表，我只是建议你保留对你创建的表的全局引用，以便以后访问它们。

如何使用面向对象的Javascript与HTML对象进行交互

2 个答案: