Xóa tất cả hàng trong bảng javascript

Không có (undefined)

<table>
  <tr>
    <td>Cell 1.1td>
    <td>Cell 1.2td>
    <td>Cell 1.3td>
  tr>
  <tr>
    <td>Cell 2.1td>
    <td>Cell 2.2td>
    <td>Cell 2.3td>
  tr>
  <tr>
    <td>Cell 3.1td>
    <td>Cell 3.2td>
    <td>Cell 3.3td>
  tr>
table>

<table>
  <tr>
    <td>Cell 1.1td>
    <td>Cell 1.2td>
    <td>Cell 1.3td>
  tr>
  <tr>
    <td>Cell 2.1td>
    <td>Cell 2.2td>
    <td>Cell 2.3td>
  tr>
  <tr>
    <td>Cell 3.1td>
    <td>Cell 3.2td>
    <td>Cell 3.3td>
  tr>
table>

Bị ném nếu index lớn hơn hoặc bằng số lượng hàng có sẵn hoặc là một giá trị âm khác với -1

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

Để xóa các hàng và ô của bảng trong Javascript

1. Tự lấy bàn – var table = document.getElementById("TABLE-ID");
2. Có thể xóa các hàng bằng cách sử dụng hàm deleteRow() và chỉ định số hàng – table.deleteRow(0);
3. Các ô có thể được loại bỏ tương tự bằng hàm deleteCell()
   • var secondRow = table.rows[1];
   • secondRow.deleteCell(0);

Đ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

TLDR – TRANG TRÌNH BÀY NHANH

Tải xuống & Ghi chú

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

HÀNG BẢNG JAVASCRIPT

Được rồi, bây giờ chúng ta hãy xem các ví dụ về cách lấy và xóa các hàng của bảng HTML trong Javascript

1) NHẬN HÀNG VÀ Ô BẢNG

1-nhận. html

  
First
  
Second
  
Third
  
Forth

 

Thứ nhấtThứ haiThứ baThứ ba

Trước khi chúng ta bắt đầu xóa các hàng và ô, tôi cho rằng sẽ tốt hơn nếu giải thích thêm một chút về việc lặp qua các hàng và ô của bảng HTML

• (B1) Việc lấy bảng trong Javascript sẽ dễ hiểu. var table = document.getElementById("ID");
• (B2) Bản thân bảng có thuộc tính

  
  
    
   
  A
   
  B
   
    
   
  C
   
  D
   
    
   
  D
   
  E
   
  
   
  
  
  

  0 và thuộc tính này chứa tất cả các hàng
  • Chúng ta có thể lặp qua các hàng giống như một mảng

    
    
      
     
    A
     
    B
     
      
     
    C
     
    D
     
      
     
    D
     
    E
     
    
     
    
    
    

    1
  • Mỗi hàng cũng có một thuộc tính

    
    
      
     
    A
     
    B
     
      
     
    C
     
    D
     
      
     
    D
     
    E
     
    
     
    
    
    

    2 chứa tất cả các ô –

    
    
      
     
    A
     
    B
     
      
     
    C
     
    D
     
      
     
    D
     
    E
     
    
     
    
    
    

    3
• (B3) Mỗi ​​hàng/ô riêng lẻ có thể được truy cập giống như sử dụng

  
  
    
   
  A
   
  B
   
    
   
  C
   
  D
   
    
   
  D
   
  E
   
  
   
  
  
  

  4

2) LOẠI BỎ HÀNG VÀ Ô CỦA BẢNG

2-xóa. html

  
 
A
 
B
 
  
 
C
 
D
 
  
 
D
 
E
 

 

ABCDE

Đây là “phiên bản đầy đủ” của đoạn giới thiệu. Khi nói đến việc xóa các hàng và ô trong bảng, chỉ có 2 chức năng mà bạn cần biết –

  
 
A
 
B
 
  
 
C
 
D
 
  
 
D
 
E
 

 

  
 
A
 
B
 
  
 
C
 
D
 
  
 
D
 
E
 

 

3) CÁCH THAY THẾ ĐỂ XÓA HÀNG và Ô

3-thay thế. html

  
 
A
 
B
 
  
 
C
 
D
 
  
 
D
 
E
 

 

ABCDE

Cuối cùng, có nhiều cách khác để xóa hàng và ô –

• Chúng ta có thể sử dụng

  
  
    
   
  A
   
  B
   
    
   
  C
   
  D
   
    
   
  D
   
  E
   
  
   
  
  
  

  7 để lấy một bảng/hàng/ô cụ thể
• Sử dụng

  
  
    
   
  A
   
  B
   
    
   
  C
   
  D
   
    
   
  D
   
  E
   
  
   
  
  
  

  8 để lấy phạm vi bảng/hàng/ô bằng bộ chọn CSS
• Sau đó sử dụng

  
  
    
   
  A
   
  B
   
    
   
  C
   
  D
   
    
   
  D
   
  E
   
  
   
  
  
  

  9 để loại bỏ chúng

BIT BỔ SUNG & LIÊN KẾT

Đó là tất cả những gì dành cho hướng dẫn 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

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

• Duyệt qua một bảng HTML bằng Giao diện JavaScript và DOM – MDN
• Xóa hàng – MDN
• Cách thêm hàng và ô của bảng trong Javascript – Code Boxx

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

Làm cách nào để xóa tất cả các hàng trong bảng JavaScript?

Làm cách nào để xóa tất cả các hàng của bảng trong jQuery?

Làm cách nào để xóa ô khỏi bảng trong JavaScript?

Làm cách nào để thêm và xóa hàng khỏi bảng trong JavaScript?