• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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> 객체는 표준 속성/메서드/이벤트 지원.

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Basic JS - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★ document.write() = 다큐먼트라이트
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
Basic JS - String Methods - JS문자열메서드
Basic JS - Number - JS숫자
Basic JS - Number Method - JS숫자메서드
Basic JS - Math 객체 - JS수학객체 (= JS산수객체 = Math객체 = Math Object = 매스 …
Basic JS - Dates - JS날짜
1/67
목록
찾아주셔서 감사합니다. Since 2012