HTML DOM TableRow 개체

<시간/>

HTML DOM TableRow 개체는 HTML 문서의 요소를 나타냅니다.

TableRow 개체 만들기

구문

다음은 구문입니다 -

document.createElement(“TR”);

TableRow 개체의 속성

속성	설명
rowIndex	테이블의 행 컬렉션에서 행의 위치를 반환합니다.
섹션RowIndex	ad, tbody 또는 tfoot의 rows 컬렉션에서 행의 위치를 반환합니다.

TableRow 객체의 메소드

메소드	설명
deleteCell()	현재 테이블 행에서 셀을 제거합니다.
insertCell()	현재 테이블 행에 셀을 추가합니다.

TableRow 개체의 예를 살펴보겠습니다.

예시

<!DOCTYPE html>
<html>
<style>
   body {
      color: #000;
      background: lightblue;
      height: 100vh;
      text-align: center;
   }
   table {
      margin: 2rem auto;
      width: 400px;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
   }
</style>
<body>
<h1>DOM TableRow Object Demo</h1>
<table border="2">
<thead>
<tr>
<th>Name</th>
<th>Language</th>
</tr>
<thead>
<tbody class="table-body">
<tr>
<td>John</td>
<td>English</td>
</tr>
<tr>
<td>Elon</td>
<td>Germany</td>
</tr>
</tbody>
</table>
<button onclick="get()" class="btn">Create TableRow</button>
<script>
   function get() {
      var tr = document.createElement("TR");
      tr.innerHTML = "<td>Mario</td><td>French</td>"
      document.querySelector(".table-body").appendChild(tr);
   }
</script>
</body>
</html>

출력

HTML DOM TableRow 개체

"TableRow 생성"을 클릭하여 테이블 행을 생성합니다.

HTML DOM TableRow 개체