JavaScript thêm hàng vào cuối bảng

Chào mừng bạn đến với hướng dẫn nhanh về cách thêm các hàng và ô của bảng HTML trong Javascript. Cần cập nhật động bảng HTML bằng Javascript?

Để thêm hàng và ô mới vào bảng HTML trong Javascript

1. Lấy cái bàn – var table = document.getElementById("TABLE");
2. Thêm một hàng mới – var row = table.insertRow();
3. Nối các ô – var cell = row.insertCell();
4. Đặt nội dung ô – cell.innerHTML = "TEXT";

Điều đó sẽ bao gồm những điều cơ bản, nhưng hãy đọc để biết thêm ví dụ

ⓘ Tôi đã bao gồm một tệp zip chứa tất cả mã nguồn khi bắt đầu hướng dẫn này, vì vậy bạn không cần phải sao chép-dán mọi thứ… Hoặc nếu bạn chỉ muốn đi sâu vào

TRANG TRÌNH BÀY NHANH

TẢI XUỐNG & LƯU Ý

Đầu tiên, đây là liên kết tải xuống mã ví dụ như đã hứa

GHI CHÚ NHANH

MÃ VÍ DỤ TẢI XUỐNG

Nhấp vào đây để tải xuống tất cả mã nguồn ví dụ, tôi đã phát hành nó theo giấy phép MIT, vì vậy hãy thoải mái xây dựng trên mã nguồn đó hoặc sử dụng nó trong dự án của riêng bạn

THÊM HÀNG và Ô

Được rồi, bây giờ chúng ta hãy xem ví dụ về cách thêm hàng và ô vào bảng HTML

1) CHÈN HÀNG và Ô

1-thêm-hàng. html

<!-- (A) HTML TABLE -->
<table id="demoA">
  <tr> <td>A</td> <td>B</td> </tr>
</table>

<!-- (B) ADD ROWS CELLS -->
<script>
function addRow (top) {
  // (B1) GET TABLE
  var table = document.getElementById("demoA");

  // (B2) INSERT ROW
  if (top) { var row = table.insertRow(0); }
  else { var row = table.insertRow(); }

  // (B3) INSERT CELLS
  var cell = row.insertCell();
  cell.innerHTML = "AA";
  cell = row.insertCell();
  cell.innerHTML = "BB";
}
</script>
<input type="button" value="Add Bottom" onclick="addRow()"/>
<input type="button" value="Add Top" onclick="addRow(1)"/>

AB

Không cần tìm đâu xa, đây là các bước tương tự như đoạn giới thiệu – Lấy bảng, thêm hàng, nối các ô. Nhưng lưu ý thêm

• Theo mặc định, insertRow() sẽ chèn vào cuối bảng
• Thay vào đó, hãy sử dụng insertRow(0) để thêm vào đầu bảng

Có, insertRow() nhận tham số "vị trí chèn". Chúng ta có thể thực hiện một số phép tính đơn giản nếu bạn muốn chèn một hàng vào giữa bảng

• <!-- (A) HTML TABLE -->
  <table id="demoB">
  <tr> <td>A</td> <td>B</td> </tr>
  </table>
  
  <!-- (B) ADD ROWS CELLS -->
  <script>
  function addRow () {
    var table = document.querySelector("#demoB tbody");
    table.innerHTML = "<tr><td>TOP</td><td>AA</td></tr>" + table.innerHTML;
    table.innerHTML += "<tr><td>BOTTOM</td><td>BB</td></tr>";
  }
  </script>
  <input type="button" value="Add Rows" onclick="addRow()"/>

  1

• <!-- (A) HTML TABLE -->
  <table id="demoB">
  <tr> <td>A</td> <td>B</td> </tr>
  </table>
  
  <!-- (B) ADD ROWS CELLS -->
  <script>
  function addRow () {
    var table = document.querySelector("#demoB tbody");
    table.innerHTML = "<tr><td>TOP</td><td>AA</td></tr>" + table.innerHTML;
    table.innerHTML += "<tr><td>BOTTOM</td><td>BB</td></tr>";
  }
  </script>
  <input type="button" value="Add Rows" onclick="addRow()"/>

  0

2) CHUỖI HTML THỦ CÔNG

2-html-chuỗi. html

<!-- (A) HTML TABLE -->
<table id="demoB">
<tr> <td>A</td> <td>B</td> </tr>
</table>

<!-- (B) ADD ROWS CELLS -->
<script>
function addRow () {
  var table = document.querySelector("#demoB tbody");
  table.innerHTML = "<tr><td>TOP</td><td>AA</td></tr>" + table.innerHTML;
  table.innerHTML += "<tr><td>BOTTOM</td><td>BB</td></tr>";
}
</script>
<input type="button" value="Add Rows" onclick="addRow()"/>

AB

Đối với các bạn thích làm theo “cách HTML thủ công”, đây là cách thay thế. Nhưng một lời khuyên nhỏ – Thay đổi trực tiếp

<!-- (A) HTML TABLE -->
<table id="demoB">
<tr> <td>A</td> <td>B</td> </tr>
</table>

<!-- (B) ADD ROWS CELLS -->
<script>
function addRow () {
  var table = document.querySelector("#demoB tbody");
  table.innerHTML = "<tr><td>TOP</td><td>AA</td></tr>" + table.innerHTML;
  table.innerHTML += "<tr><td>BOTTOM</td><td>BB</td></tr>";
}
</script>
<input type="button" value="Add Rows" onclick="addRow()"/>

BIT & LIÊN KẾT HỮU ÍCH

Đó là tất cả cho hướng dẫn chính và đây là một phần nhỏ về một số tính năng bổ sung và liên kết có thể hữu ích cho bạn

CÁI NÀO TỐT HƠN?

Cá nhân tôi nghiêng về cách “hướng đối tượng” tạo hàng và ô mới. Điều đó thuận tiện và dễ dàng hơn rất nhiều mà không cần phải viết mã HTML thủ công. Nhưng cả hai phương pháp đều đúng – Sử dụng phương pháp nào phù hợp nhất với bạn

LIÊN KẾT và THAM KHẢO

• Chèn hàng – MDN
• Chèn ô – MDN
• Cách xóa các hàng và ô trong bảng – Codeboxx

BẢNG CHEAT INFOGRAPHIC

Cảm ơn bạn đã đọc, và chúng tôi đã đi đến cuối. Tôi hy vọng rằng nó đã giúp bạn hiểu rõ hơn và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, vui lòng bình luận bên dưới. Chúc may mắn và mã hóa hạnh phúc