Table 생성

From. 프론트엔드 개발자를 위한 자바스크립트 프로그래밍

jQuery table plugin : http://wootapa-watable.appspot.com/



DOM 코어 메소드를 이용한 테이블 생성

							var table = document.createElement("table");
							table.border = 1;
							table.width = "100%";
							table.className ="create_table_sample";
							table.style.borderCollapse = "collapse";

							//tbody 생성
							var tbody = document.createElement("tbody");
							table.appendChild(tbody);

							// 1 row created
							var row1 = document.createElement("tr");
							tbody.appendChild(row1);
							var cell1_1 = document.createElement("td");
							cell1_1.appendChild(document.createTextNode("Cell 1,1"));
							row1.appendChild(cell1_1);
							var cell2_1 = document.createElement("td");
							cell2_1.appendChild(document.createTextNode("Cell 2,1"));
							row1.appendChild(cell2_1);

							// 1 row created
							var row2 = document.createElement("tr");
							tbody.appendChild(row2);
							var cell1_2 = document.createElement("td");
							cell1_2.appendChild(document.createTextNode("Cell 1,2"));
							row2.appendChild(cell1_2);
							var cell2_2 = document.createElement("td");
							cell2_2.appendChild(document.createTextNode("Cell 2,2"));
							row2.appendChild(cell2_2);

							document.body.appendChild(table); 					
						


HTML DOM 의 테이블 관련 프로퍼티와 메서드로 만든 경우

							var table = document.createElement("table");
							table.border = 1;
							table.width = "100%";

							// tbody 생성
							var tbody = document.createElement("tbody");
							table.appendChild(tbody);

							// 1 row
							tbody.insertRow(0);
							tbody.rows[0].insertCell(0);
							tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));
							tbody.rows[0].insertCell(1);
							tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));
							tbody.rows[0].insertCell(2);
							tbody.rows[0].cells[2].appendChild(document.createTextNode("Cell 3,1"));
							tbody.rows[0].insertCell(3);
							tbody.rows[0].cells[3].appendChild(document.createTextNode("Cell 4,1"));
					
							// 2 row
							tbody.insertRow(1);
							tbody.rows[1].insertCell(0);
							tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2"));
							tbody.rows[1].insertCell(1);
							tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));
							tbody.rows[1].insertCell(2);
							tbody.rows[1].cells[2].appendChild(document.createTextNode("Cell 3,2"));
							tbody.rows[1].insertCell(3);
							tbody.rows[1].cells[3].appendChild(document.createTextNode("Cell 4,2"));

							// 3 row
							tbody.insertRow(2)
							tbody.rows[2].insertCell(0);
							tbody.rows[2].cells[0].appendChild(document.createTextNode("Cell 1,3"));
							tbody.rows[2].insertCell(1);
							tbody.rows[2].cells[1].appendChild(document.createTextNode("Cell 2,3"));
							tbody.rows[2].insertCell(2);
							tbody.rows[2].cells[2].appendChild(document.createTextNode("Cell 3,3"));
							tbody.rows[2].insertCell(3);
							tbody.rows[2].cells[3].appendChild(document.createTextNode("Cell 4,3"));

							document.body.appendChild(table);						
						

** HTML DOM TABLE 관련 프로퍼티 메서드 정리

<table> 요소에는 다음이 추가되었습니다.

  • * caption - <caption>요소를 가리키는 포인터입니다.
  • * tBodies - <tbody>요소의 HTMLCollection입니다.
  • * tFoot - <tfoot>요소를 가리키는 포인터입니다.
  • * tHead - <thead>요소를 가리키는 포인터입니다.
  • * rows - 테이블의 모든 행에 대한 HTMLCollection입니다.
  • * createTHead() - <thead> 요소를 생성해 테이블에 삽입하고 그 참조를 반환합니다.
  • * createTFoot() - <tfoot> 요소를 생성해 테이블에 삽입하고 그 참조를 반환합니다.
  • * createCaption() - <caption> 요소를 생성해 테이블에 삽입하고 그 참조를 반환합니다.
  • * deleteTHead() - <thead> 요소를 삭제합니다.
  • * deleteTFoot() - <tfoot> 요소를 삭제합니다.
  • * deleteCaption() - <caption> 요소를 삭제합니다.
  • * deleteRow(pos) - 주어진 위치의 행을 삭제합니다.
  • * insertRow(pos) - rows 컬렉션에서 주어진 위치에 행을 삽입합니다.


<tbody> 요소에는 다음이 추가되었습니다.

  • * rows - <tbody>요소에 포함된 행의 HTMLCollection입니다.
  • * deleteRow(pos) - 주어진 위치의 행을 삭제합니다.
  • * insertRow(pos) - rows 컬렉션에서 주어진 위치에 행을 삽입하고 그에 대한 참조를 반환합니다.


<tr> 요소에는 다음이 추가되었습니다.

  • * cells - <tr>요소에 포함된 셀의 HTMLCollection입니다.
  • * deleteCell(pos) - 주어진 위치의 셀을 삭제합니다.
  • * insertCell(pos) - cells 컬렉션에서 주어진 위치에 셀을 삽입하고 새 셀에 대한 참조를 반환합니다.


위 코드에서 <table>과 <tbody> 요소 생성은 이전 예제와 같습니다. 바뀐 부분은 두 행을 생성하는 부분인데, 이제 DOM 테이블 프로퍼티와 메서드를 사용합니다. 첫 번째 행을 생성할 때는 <table> 요소에서 insertRow()메서드를 호출하며 매개변수 0을 넘겨서 새 행이 위치할 곳을 정합니다. 이후에는 새 행을 tbody.rows[0]로 참조할 수 있습니다.

셀 생성도 비슷한 방법입니다. <tr>요소에서 insertCell()을 호출하며 셀이 위치할 인덱스를 넘기면 됩니다. 이후에는 새 셀을 tbody.rows[0].cells[0]로 참조할 수 있습니다.

이 프로퍼티와 메서드를 이용하면 테이블 생성 코드를 훨씬 논리적이고 가독성있게 만들 수 있습니다. 물론 두 방법 모두 정확한 방법입니다.



FOR 문으로 생성하는 경우 (구분선 포함)

							/*
							table styling ::
							div{padding:10px;background:#eee;border-bottom:1px solid #aaa;}
							table tr.even td{background:#ccc;}
							*/

							var table = document.createElement("table");
							table.border = 1;
							table.width = "100%";
							table.style.borderCollapse = "collapse";
							table.style.tableLayout = "fixed";

							// tbody 생성
							var tbody = document.createElement("tbody");
							table.appendChild(tbody);

							for (var i = 0; i < 10; i++) {
								tbody.insertRow(i);
								if (i%2 == 1) {
									tbody.rows[i].setAttribute('class', 'even'); 
									for (var j = 0; j < 10 ; j++) {				
										tbody.rows[i].insertCell(j);
										tbody.rows[i].cells[j].appendChild(document.createTextNode("Cell "+(j+1)+", "+(i+1)));
									}
								}else {
									for (var j = 0; j < 10 ; j++) {				
										tbody.rows[i].insertCell(j);
										tbody.rows[i].cells[j].appendChild(document.createTextNode("Cell "+(j+1)+", "+(i+1)));
									}					
								}
							}	

							document.body.appendChild(table);