Как я могу использовать объектно-ориентированный Javascript для взаимодействия с объектами HTML

Question

Я очень новичок в объектно-ориентированном javascript, с опытом написания графических интерфейсов на python и java. Я пытаюсь создать HTML-таблицы, которые я могу разместить в местах по всей веб-странице. Каждая HTML-таблица будет иметь две CSS-разметки, которые определяют, будет ли она выбрана или нет. Я могу написать все взаимодействия, если у меня есть только одна таблица. Это сбивает с толку, когда у меня есть несколько таблиц. Мне интересно, как разместить эти таблицы на пустой веб-странице, а затем получить доступ к таблицам по отдельности. Я думаю, что у меня возникают проблемы с пониманием того, как наследование и иерархия работают в javascript / html.

ПРИМЕЧАНИЕ: я не спрашиваю, как сделать стол. Я пытаюсь динамически создавать несколько таблиц и размещать их по всей веб-странице. Затем получите независимый доступ к их CSS и измените его (переместите их в другое место или измените внешний вид независимо от других таблиц).

Answer 1

Предполагая, что вы хотите вносить изменения в режиме реального времени и готовы использовать такую ​​библиотеку, как jQuery, просто добавьте таблицы к документу и присвойте каждому уникальный идентификатор CSS.Где бы ни происходил код генерации вашей таблицы, просто держите счетчик и устанавливайте для идентификатора что-то вроде «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

Я не понимаю необходимости соблюдения принципов вашей проблемы.зачем вам наследование и иерархия для генерации пары элементов, а затем для изменения некоторых их реквизитов?
если бы я понял, вам бы хотелось отслеживать каждую создаваемую вами таблицу, чтобы потом можно было изменить ее реквизиты css.
если вы хотите использовать js в качестве объектно-ориентированного языка, я бы написал определение класса для табличного объекта:
var Table = function(innerHTML,container){<br> this.innerHTML = innerHTML;<br> this.container = container; }<br> //static member<br> Table.TABLES = [];//global reference to all the tables created<br> Table.prototype = { init : function(){<br> 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); }<br> }
, а затем все, что вам нужно сделать, это создать новую таблицу и инициировать ее:
(new Table(table_content_here)).init();,
и позже вы можете ссылаться на него, обращаясь к ТАБЛИЦАМ в классе таблиц:
for (var i in Table.TABLES)<br> Table.TABLES[i].setCssProp(cssName,cssValue);
я знаю, что вы знаете, как создавать таблицы, я просто предлагал вам сохранитьглобальная ссылка на те, которые вы создаете, чтобы иметь к ним доступ позже.