Computer >> Máy Tính >  >> Lập trình >> HTML

Đối tượng TableRow HTML DOM

Đối tượng HTML DOM TableRow đại diện cho phần tử của tài liệu HTML.

Tạo đối tượng TableRow

Cú pháp

Sau đây là cú pháp -

document.createElement(“TR”);

Thuộc tính của đối tượng TableRow

Thuộc tính Giải thích
rowIndex Nó trả về vị trí của một hàng trong tập hợp các hàng của bảng.
sectionRowIndex Nó trả về vị trí của một hàng trong bộ sưu tập hàng của thead, tbody hoặc tfoot.

Các phương thức của đối tượng TableRow

Phương pháp Giải thích
deleteCell () Nó xóa một ô khỏi hàng bảng hiện tại.
insertCell () Nó thêm một ô vào hàng bảng hiện tại.

Hãy để chúng tôi xem một ví dụ về đối tượng TableRow:

Ví dụ

<!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>

Đầu ra

Đối tượng TableRow HTML DOM

Nhấp vào “Tạo TableRow” để tạo một hàng trong bảng.

Đối tượng TableRow HTML DOM