어떻게 객체 지향 자바 스크립트를 사용하여 HTML 객체와 상호 작용할 수 있습니까?

Question

저는 gui를 파이썬과 자바로 작성한 경험이있는 객체 지향 자바 스크립트를 처음 접했습니다. 웹 페이지 전체에 배치 할 수있는 html 테이블을 만들려고합니다. 각각의 html 테이블은 그것이 선택되었는지 아닌지를 제어하는 ​​두 개의 css 레이아웃을 가지고 있습니다. 테이블 하나만 있으면 모든 상호 작용을 작성할 수 있습니다. 여러 개의 표가있을 때 혼란스러워집니다. 빈 웹 페이지 전체에 이러한 테이블을 배치 한 다음 개별적으로 테이블에 액세스하는 방법에 대해 궁금합니다. 상속 및 계층 구조가 javascript/html에서 어떻게 작동하는지 이해하는 데 문제가 있다고 생각합니다.

참고 : 테이블을 만드는 방법을 묻지 않습니다. 동적으로 여러 테이블을 만들고 웹 페이지 전체에 배치하려고합니다. 그런 다음 자신의 CSS에 독립적으로 액세스하고 변경합니다 (다른 위치로 이동하거나 다른 표와 독립적으로 모양을 변경합니다).

Answer 1

실시간으로 변경하려는 경우 jQuery와 같은 라이브러리를 사용하려는 경우 문서에 표를 추가하고 각 표에 고유 한 CSS ID를 부여하기 만하면됩니다. 테이블 생성 코드가 생성되는 곳마다 카운터를 유지하고 "mytable + counter_val"과 같은 ID를 설정하십시오.

거기에서 각 테이블을 참조하고 jQuery 메서드를 사용하여 원하는대로 CSS를 조정할 수 있습니다.

간단한 예 :

// 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와 문서를 참조하십시오 : 당신은 하나의 클래스로 구분을 선택하고 선택하지 않은, 당신은 단지 추가 할 수의 차이가있는 경우

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); 

가/클래스를 제거 자세한 내용은 http://docs.jquery.com/Main_Page

Answer 2

귀하의 문제에 대한 필요성을 이해하지 못합니다. 왜 두 개의 요소를 생성하고 그 소품 중 일부를 변경하기 위해 상속과 계층 구조가 필요합니까?
내가 corectly를 이해했다면, 나중에 각 테이블을 수정할 수 있도록 작성한 각 테이블을 추적하고 싶을 것입니다.
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); }
}
을 다음 당신이해야 할 모든 새 테이블을 생성하고 그것을 시작 : 당신은 객체 지향 언어로 JS를 사용하려는 경우
, 난 테이블 개체에 대한 클래스 정의를 작성합니다
(new Table(table_content_here)).init();, 난 당신이, 난 그냥 당신이 대한 액세스를하기 위해 만드는 것과 글로벌 참조를 유지하는 것이 제안되었다 테이블을 만드는 방법을 알고 알고
for (var i in Table.TABLES)
Table.TABLES[i].setCssProp(cssName,cssValue);
:
하고 나중에에 표 클래스의 테이블을 accesing하여 참조 할 수 있습니다 그들에게 나중에.