Xóa các hàng trong bảng javascript

Question

Tôi gặp sự cố với chức năng trong javascript và không thể tìm ra lý do. Nó thực sự khá thẳng về phía trước. Tôi đang cố xóa tất cả các hàng trong bảng html. vì vậy tôi đã viết:

function delete_gameboard(){ 
    var table = document.getElementById("gameboard"); 
    var rowCount = table.rows.length; 
    for (var i = 0; i < rowCount; i++) { 
     table.deleteRow(i); 
    } 
} 

Tuy nhiên, nó sẽ chỉ xóa một nửa trong số đó. Ai có thể thấy điều gì gây ra hành vi kỳ lạ này?

Answer 1

Bởi vì khi bạn xóa hàng đầu tiên, hàng thứ hai sẽ trở thành đầu tiên, nó năng động.

Bạn có thể làm như sau:

while(table.rows.length > 0) { 
    table.deleteRow(0); 
} 

Answer 2

Các table hàng là sống, có nghĩa là nếu bạn xóa hàng 0 thì hàng tiếp theo trở thành hàng 0, chỉ cần không ngừng xóa hàng 0

function delete_gameboard(){ 
    var table = document.getElementById("gameboard"); 
    var rowCount = table.rows.length; 
    for (var i=0; i < rowCount; i++) { 
     table.deleteRow(0); 
    } 
} 

Answer 3

Nếu bạn xóa hàng đầu tiên, hàng thứ hai trở thành hàng đầu tiên mới.

tôi thích để làm điều này:

while(table.rows[0]) table.deleteRow(0); 

Answer 4

function delete_gameboard(){ 
var table = document.getElementById("gameboard"); 
var rowCount = table.rows.length; 
for (var i=rowcount-1; i >=0; i--) { 
    table.deleteRow(i); 
} 
} 

Chỉ số của hàng thay đổi khi bạn xóa nó. Sử dụng vòng lặp ngược. Điều này cũng sẽ hữu ích nếu bạn đang sử dụng bất kỳ điều kiện nào để xóa các hàng. Nếu bạn đang xóa tất cả các hàng, sử dụng sau đây

while(table.rows.length) { 
    table.deleteRow(0); 
} 

Answer 5

Hãy xem xét điều này:

index 0: row #1 
index 1: row #2 
index 2: row #3 
index 3: row #4 
index 4: row #5 

bạn xóa chỉ số # 2 (hàng # 3), do đó động cơ DOM điều chỉnh các phím chỉ mục và bạn kết thúc với:

index 0: row #1 
index 1: row #2 
index 2: row #4 <---hey! index #2 is still there 
index 3: row #5 

bạn đang cơ bản đào một lỗ ở vị trí nơi bạn đang đứng, vì vậy khi bạn đào sâu hơn, bạn tự nhiên chìm sâu hơn và không bao giờ nhìn thấy bất kỳ sự tiến bộ ... cho đến khi bạn chạy ra khỏi hàng để xóa trong bảng.

Answer 6

Nếu bạn đang sử dụng JQuery trong mã của bạn thì cách đơn giản nhất để xóa các hàng đang sử dụng đoạn mã sau:

$('#myTable tbody').html(''); 

Answer 7

function delRow() 
    { 
    var current = window.event.srcElement; 
    //here we will delete the line 
    while ((current = current.parentElement) && current.tagName !="TR"); 
    current.parentElement.removeChild(current); 
    } 

Answer 8

Bạn chỉ có thể đi:

document.getElementById("gameboard").innerHTML = "";