[HTML_Objects] JS - <tr> 객체 ★ - 테이블행 (= 테이블가로줄 = tr태그 = 티알태그) (HTML5수정)</tr>

1. <tr> 객체 정의 - 테이블 행
2. <tr> 객체 구문
3. <tr> 객체 예제 - 접근
4. <tr> 객체 예제 - 생성
5. <tr> 객체 집합
6. <tr> 객체 속성
7. <tr> 객체 메서드

<tr> 객체 정의 - 테이블 행

 

HTML <tr> 태그(요소) 의미.

 

<tr> 객체 구문

 

[접근]

var x = document.getElementById("요소ID");

또는,
var x = document.getElementById("테이블ID").rows 

 

[생성]

var x = document.createElement("TR");

 

<tr> 객체 예제 - 접근

 

<style>

table, th, td {border: 1px solid black; border-collapse:collapse;}

</style>

<table>

  <tr id="hz">

    <td>HTML</td>

    <td>CSS</td>

    <td>JS</td>

  </tr>

</table>

<button onclick="homzzang()">클릭</button>

<script>

function homzzang() {

  var x = document.getElementById("hz");

  x.deleteCell(0);

}

</script>

 

결과보기 

<tr> 객체 예제 - 생성

 

<style>

table, td {border: 1px solid black; border-collapse:collapse;}

</style>

<table id="hz">

</table>

<button onclick="homzzang()">클릭</button>

<script>

function homzzang() {

  var x = document.createElement("TR");

  x.setAttribute("id", "hzTr");

  document.getElementById("hz").appendChild(x);

  var y = document.createElement("TD");

  var t = document.createTextNode("Homzzang.com");

  y.appendChild(t);

  document.getElementById("hzTr").appendChild(y);

}

</script>

 

결과보기 

<tr> 객체 집합

 

cells

테이블 행에있는 모든 <td> 또는 <th> 요소의 집합 반환.

 

<tr> 객체 속성

 

align

HTML5 제외. 대신 style.textAlign 속성 사용.

테이블 tr 내에서 내용의 가로 정렬 설정/반환.

 

bgColor

HTML5 제외. 대신 style.backgroundColor 속성 사용.

테이블 행의 배경색 설정/반환.

 

ch

HTML5 제외.

테이블 행의 셀에 대한 정렬 문자를 설정/반환.

 

chOff 

HTML5 제외.

ch 속성의 가로 오프셋을 설정/반환.

 

height

HTML5 제외. 대신 style.height 속성 사용.

테이블 행의 높이를 설정/반환.

 

rowIndex

테이블의 rows 집합에서 행의 위치 반환

 

sectionRowIndex

tbody, thead 또는 tfoot의 rows 집합에서 행의 위치 반환.

 

vAlign

HTML5 제외. 대신 style.verticalAlign 속성 사용.

테이블 tr 내에서 내용의 수직 정렬을 설정/반환. 

 

<tr> 객체 메서드

 

deleteCell()

현재 테이블 행에서 셀 삭제.

 

insertCell()

현재 테이블 행에 셀 삽입 

 

※ <tr> 객체는 표준 속성/메서드/이벤트 지원.