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

Đối tượng bảng DOM HTML

Đối tượng bảng DOM HTML đại diện cho phần tử

của tài liệu HTML.

Hãy để chúng tôi xem cách tạo đối tượng bảng

Cú pháp

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

document.createElement(“TABLE”);

Thuộc tính

Sau đây là các thuộc tính của đối tượng bảng -

của bảng trong tài liệu HTML. của bảng trong tài liệu HTML.
Thuộc tính Giải thích
chú thích Nó trả về phần tử
của bảng trong tài liệu HTML.
tFoot Nó trả về phần tử
tHead Nó trả về phần tử

Phương pháp

Sau đây là các phương thức của đối tượng bảng -

trống và thêm nó vào bảng. trống và thêm nó vào bảng. khỏi bảng. khỏi bảng. khỏi bảng. trống và thêm nó vào bảng.
Phương pháp Giải thích
createCaption () Nó tạo một phần tử
trống và thêm nó vào bảng.
createTFoot () Nó tạo một phần tử
createTHead () Nó tạo một phần tử
deleteCaption () Nó xóa phần tử
đầu tiên khỏi bảng.
deleteRow () Nó xóa một phần tử
deleteThead () Nó xóa phần tử
deleteTFoot () Nó xóa phần tử
insertRow () Nó tạo một phần tử

Ví dụ

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

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      text-align: center;
      background-color: #fff;
      color: #0197F6;
   }
   h1 {
      color: #23CE6B;
   }
   .btn {
      background-color: #fff;
      border: 1.5px dashed #0197F6;
      height: 2rem;
      border-radius: 2px;
      width: 60%;
      margin: 2rem auto;
      display: block;
      color: #0197F6;
      outline: none;
      cursor: pointer;
   }
</style>
</head>
<body>
<h1>DOM table Object Demo</h1>
<button onclick="createTable()" class="btn">Create a table object</button>
<script>
   function createTable() {
      var table = document.createElement("TABLE");
      table.innerHTML = `<tr>
      <td>Data 1</td>
      <td>Data 2</td>
      </tr>
      <tr>
      <td>Data 3</td>
      <td>Data 4</td>
      </tr>`;
      table.setAttribute('border', "2");
      table.style.margin = "2rem auto";
      document.body.appendChild(table);
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Đối tượng bảng DOM HTML

Nhấp vào “ Tạo đối tượng bảng ”Để tạo một đối tượng bảng.

Đối tượng bảng DOM HTML