HTML: vẽ bảng bằng innerHTML

Question

document.getElementById("outputDiv").innerHTML = ""; 
document.getElementById("outputDiv").innerHTML += "<table border=1 width=100%><tr>"; 
for(j=1;j<=10;j++) 
{ 
    document.getElementById("outputDiv").innerHTML += "<td align=center>"+String.fromCharCode(j+64)+"</td>"; 
} 
document.getElementById("outputDiv").innerHTML += "</tr></table>"; 

Tôi muốn vẽ bảng bằng Javascript. Vì vậy, tôi đã viết mã như trên. Tôi nghĩ rằng nó vẽ một hàng có 10 cột, nhưng nó không hoạt động. Bất kỳ ai biết về vấn đề này ???

Answer 1

Tôi nghĩ rằng vấn đề chính là các thuộc tính của bạn không được trích dẫn.

Nhưng bạn nên cập nhật liên tục nội dung của phần tử dom trong vòng lặp — mỗi khi bạn cập nhật nội dung, nó sẽ khiến trình duyệt phải thực hiện một số công việc nội bộ để đảm bảo bố cục trang hiện tại.

Tôi sẽ tạo chuỗi html lên cục bộ, sau đó thực hiện một cập nhật cuối cùng khi hoàn tất. (và dĩ nhiên đảm bảo rằng các thuộc tính của bạn được trích dẫn)

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

var newTable = "<table border='1' width='100%'><tr>"; 
for(j = 1; j <= 10; j++) { //opening braces should always be on the same line in JS 
    newTable += "<td align='center'>" + String.fromCharCode(j+64) + "</td>"; 
} 
newTable += "</tr></table>"; 

document.getElementById("outputDiv").innerHTML = newTable; 

Answer 2

Tôi cũng gặp phải vấn đề này cách đây nhiều năm.

Vấn đề là khi bạn sử dụng thuộc tính innerHTML để thêm HTML, sau mỗi lần cập nhật, công cụ cơ bản sẽ đóng thẻ không rõ ràng (và sửa các HTML xấu khác) cho bạn. Vì vậy, sau dòng thứ hai, các thẻ <table> và <tr> sẽ tự động bị đóng và tất cả nội dung sau đó sẽ chỉ được ghi bên ngoài bảng.

---

Phương pháp 1 (Cách dễ dàng)

Sử dụng một chuỗi để lưu trữ các HTML cho toàn bộ bảng và cập nhật nó tất cả cùng một lúc.

var HTML = "<table border=1 width=100%><tr>"; 
for(j=1;j<=10;j++) 
{ 
    HTML += "<td align=center>"+String.fromCharCode(j+64)+"</td>"; 
} 
HTML += "</tr></table>"; 
document.getElementById("outputDiv").innerHTML = HTML; 

Fiddle

---

Phương pháp 2 (Cách tốt hơn)

Sử dụng DOM chức năng

var table = document.createElement('table'); 
table.setAttribute('border','1'); 
table.setAttribute('width','100%') 
var row = table.insertRow(0); 
for(j=1; j<=10; j++){ 
    var text = document.createTextNode(String.fromCharCode(j+64)); 
    var cell = row.insertCell(j-1); 
    cell.setAttribute('align','center') 
    cell.appendChild(text); 
} 
document.getElementById("outputDiv").appendChild(table); 

Fiddle

---

Phương pháp 2 tăng cường (Cách chưa tốt)

Sử dụng CSS thay vì HTML thuộc tính. Cái sau thường được khấu hao theo các thông số kỹ thuật mới nhất.

Một nguồn lực lớn để bắt đầu học CSS là Mozilla Developer Network

Fiddle

---

Phương pháp 3 (Các chặng đường dài, nhưng tốt nhất trong dài hạn)

Sử dụng jQuery.

$('<table>').append('<tr>').appendTo('#outputDiv'); 
for(j=1; j<=10; j++) 
    $('<td>').text(String.fromCharCode(j+64)).appendTo('tr'); 

Fiddle