Hướng dẫn how do you fill a table in javascript? - làm thế nào để bạn điền vào một bảng trong javascript?

Làm thế nào tôi có thể điền một bảng với JavaScript theo cách thích hợp?

function loadTableData() {

  //0: Date
  //1: Name

  var row = document.getElementById("test");

  var x = row.insertCell(0);
  x.innerHTML = "10/17/2018";

  var x = row.insertCell(1);
  x.innerHTML = "john doe";

}

  

    

      
date
      
file name
    
  
  

    

  

Mã hiện tại của tôi điền vào hai ô đầu tiên nhưng tôi muốn chuyển sang cột tiếp theo và điền vào hai ô khác. Tôi không chắc làm thế nào để làm điều này một cách chính xác.

Sản lượng hiện tại

Isherwood

54.5K15 Huy hiệu vàng105 Huy hiệu bạc147 Huy hiệu đồng15 gold badges105 silver badges147 bronze badges

Hỏi ngày 21 tháng 10 năm 2018 lúc 21:18Oct 21, 2018 at 21:18

1

Bí quyết là lặp qua dữ liệu của bạn và sử dụng insertRow để tạo một hàng trước khi bạn chèn dữ liệu. Bạn có thể thấy rằng phần tử tbody trống trong ví dụ này và mỗi phần tử tr được tạo động.

  

    

      
date
      
file name
    
  
  

Đã trả lời ngày 21 tháng 10 năm 2018 lúc 22:13Oct 21, 2018 at 22:13

Borrascadorborrascadorborrascador

5155 Huy hiệu bạc13 Huy hiệu Đồng5 silver badges13 bronze badges

4

Như những người trả lời khác đã đề cập, bạn cần làm việc với tài liệu bằng cách sử dụng DOM. Hãy coi mọi thứ như các yếu tố họ đang ở trong HTML.

var table = document.getElementById("myTable");

var rowNode = document.createElement("tr");
var cellNode = document.createElement("td");
var textNode = document.createTextNode("John Doe");

cellNode.appendChild(textNode);
rowNode.appendChild(cellNode);
table.appendChild(rowNode);

Để có thêm các tương tác với phần tử DOM bảng, thông số kỹ thuật W3C (giao diện DOM) là một tài liệu tham khảo tốt.

Đã trả lời ngày 21 tháng 10 năm 2018 lúc 22:18Oct 21, 2018 at 22:18

Sean Aitkensean AitkenSean Aitken

1.1571 Huy hiệu vàng11 Huy hiệu bạc23 Huy hiệu đồng1 gold badge11 silver badges23 bronze badges

Tôi không phải là một chuyên gia HTML, nhưng:

Tôi nghĩ rằng bạn phải sử dụng Element.AppendChild () để nối cho đứa trẻ bạn đã tạo ra. Bạn không nên sử dụng bên trong, thay vào đó sử dụng các phương thức được tích hợp vào mô hình đối tượng tài liệu.

Đã trả lời ngày 21 tháng 10 năm 2018 lúc 21:52Oct 21, 2018 at 21:52

S Grahams GrahamS Graham

2222 Huy hiệu bạc14 Huy hiệu Đồng2 silver badges14 bronze badges

    const courses = [{
    "Name": "Communications",
    "Date": "22 April 2022",
    "Code": "CS368"                
    },
    {
    "Name": "Programming",
    "Date": "22 April 2021",
    "Code": "CS368"                
    },
    {
    "Name": "Networks",
    "Date": "22 April 2002",
    "Code": "CS368"                
    }]
const table = document.getElementById("tableBody");
courses.map(course=>{
   let row = table.insertRow();
   let name = row.insertCell(0);
   name.innerHTML = course.Name;
   let date = row.insertCell(1);
   date.innerHTML = course.Date;
   let code = row.insertCell(2);
   code.innerHTML = course.Code;
});         
   

         

            

                
Name
                
Date
                
Code
                                              
            
         
         

           
         
   
  

Đã trả lời ngày 27 tháng 3 lúc 7:58Mar 27 at 7:58

Làm thế nào để bạn mã hóa một bảng trong javascript?

Làm thế nào để bạn điền một bảng trong HTML?

Làm cách nào để đặt bảng HTML với dữ liệu JSON?

Làm cách nào để tạo một bảng động trong HTML?