Đối tượng dữ liệu bảng DOM HTML

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

Tạo đối tượng TableData

Cú pháp

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

document.createElement(“TD”);

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

Các tiêu đề

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 bảng.
colSpan	Nó trả về và thay đổi giá trị của thuộc tính colspan của một bảng.
	Nó trả về và thay đổi giá trị của thuộc tính headers của một 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 TableData -

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 TableData Object Demo</h1>
<table border="2">
<thead>
<tr>
<th>Name</th>
<th>Language</th>
</tr>
<thead>
<tbody>
<tr>
<td>John</td>
<td>English</td>
</tr>
<tr>
<td>Elon</td>
<td>Germany</td>
</tr>
<tr class="new-row">
</tr>
</tbody>
</table>
<button onclick="get()" class="btn">Create a TableData</button>
<script>
   function get() {
      var td1 = document.createElement("TD");
      var td2 = document.createElement("TD");
      td1.innerHTML = "Mario";
      td2.innerHTML = "French";
      document.querySelector('.new-row').appendChild(td1);
      document.querySelector('.new-row').appendChild(td2);
   }
</script>
</body>
</html>

Đầu ra

Đối tượng dữ liệu bảng DOM HTML

Nhấp vào “ Tạo dữ liệu bảng ”Để tạo đối tượng TableData.

Đối tượng dữ liệu bảng DOM HTML