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

Đối tượng HTML DOM TableHeader

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

Tạo đối tượng TableHeader

Cú pháp

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

document.createElement(“TH”);

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

Thuộc tính Giải thích
cellIndex Nó trả về vị trí của một ô trong tập hợp ô của một hàng trong bảng.
colSpan Nó trả về và thay đổi giá trị của thuộc tính colspan của bảng.
tiêu đề Nó trả về và thay đổi giá trị của thuộc tính headers của bảng.
abbr Nó trả về và thay đổi giá trị của thuộc tính abbr của bảng.
rowSpan Nó trả về và thay đổi giá trị của thuộc tính rowspan của bảng

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

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 TableHeader Object Demo</h1>
<table border="2">
<thead>
<tr class="table-header">
</tr>
<thead>
<tbody>
<tr>
<td>John</td>
<td>English</td>
</tr>
<tr>
<td>Elon</td>
<td>Germany</td>
</tr>
</tbody>
</table>
<button onclick="get()" class="btn">Create a TableHeader</button>
<script>
   function get() {
      var th1 = document.createElement("TH");
      var th2 = document.createElement("TH");
      th1.innerHTML = "Name";
      th2.innerHTML = "Language";
      document.querySelector('.table-header').appendChild(th1);
      document.querySelector('.table-header').appendChild(th2);
   }
</script>
</body>
</html>

Đầu ra

Đối tượng HTML DOM TableHeader

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

Đối tượng HTML DOM TableHeader