Làm cách nào để chèn dữ liệu XML vào bảng HTML?

Trong ví dụ này, chúng tôi lặp qua một tệp XML (cd_catalog. xml) và hiển thị từng phần tử CD dưới dạng một hàng của bảng HTML

Hãy tự mình thử. Hiển thị dữ liệu XML trong bảng HTML

Ví dụ giải thích

• Chúng tôi kiểm tra trình duyệt và tải XML bằng trình phân tích cú pháp chính xác
• Chúng tôi tạo một bảng HTML với
• Chúng tôi sử dụng getElementsByTagName() để lấy tất cả các nút XML CD
• Đối với mỗi nút CD, chúng tôi hiển thị dữ liệu từ ARTIST và TITLE dưới dạng dữ liệu bảng
• Chúng tôi kết thúc bảng với

Để biết thêm thông tin về cách sử dụng JavaScript và XML DOM, hãy truy cập hướng dẫn XML DOM của chúng tôi

---

Truy cập trên các miền

Vì lý do bảo mật, các trình duyệt hiện đại không cho phép truy cập trên các miền

Điều này có nghĩa là cả trang web và tệp XML mà nó cố tải phải được đặt trên cùng một máy chủ

Các ví dụ trên W3Schools đều mở các tệp XML nằm trên miền W3Schools

Nếu bạn muốn sử dụng ví dụ trên trên một trong các trang web của mình, các tệp XML bạn tải phải được đặt trên máy chủ của riêng bạn. Nếu không thì xmlDoc. load(), sẽ tạo ra lỗi "Quyền truy cập bị từ chối"

Bên cạnh các điều khiển HTML đơn giản, bạn cũng có thể liên kết dữ liệu với các điều khiển HTML nâng cao hơn, chẳng hạn như bảng. Ví dụ sau đây cho thấy cách liên kết dữ liệu trạng thái của bạn với bảng HTML, sử dụng đảo dữ liệu XML

    
        
            Displaying XML data using XML data islands
        
    

    
        
            Displaying XML data using XML data islands
        

        
        .
        .
        .

Để kết nối các trạng thái DSO với bảng, bạn sẽ sử dụng thuộc tính DATASRC của phần tử, như thế này.

. .

Bây giờ, trong phần thân của bảng, hãy liên kết từng ô của bảng với một trường dữ liệu bằng cách sử dụng thuộc tính DATAFLD của một phần tử trong mỗi ô.

TênDân sốVốnChimHoaThành phần.

                                                                      
     
         
             Name
             Population
             Capital
             Bird
             Flower
         
      

      
          


                     

                     

                 

   

                     

                     

                 

   

                     

                     

                 

   

                     

                     

                 

   

                     

                     

                 
          
      

Và đó là tất cả để có nó. Toàn bộ ví dụ được hiển thị trong Liệt kê 19. 5

Ví dụ 19. 5. Hiển thị dữ liệu XML trong bảng (ch19_05. html)

    
        
            Displaying XML data using XML data islands
        
    

    
        
            Displaying XML data using XML data islands
        

        

        
             
                 
                     Name
                     Population
                     Capital
                     Bird
                     Flower
                 
              

              
                  
                      
                          
                          
                      
                      
                          
                          
                      
                      
                          
                          
                      
                      
                          
                          
                      
                      
                          
                          
                      
                  
              
        
    

Kết quả của Liệt kê 19. 5 xuất hiện trong Hình 19. 3. Như hình minh họa, dữ liệu từ tài liệu XML mẫu của bạn, ch19_03. xml, được hiển thị trong bảng HTML

Ví dụ này lặp qua từng phần tử và hiển thị các giá trị của phần tử và phần tử trong bảng HTML

Thí dụ

bảng, th, td {
biên giới. 1px màu đen đặc;
sụp đổ biên giới. sự sụp đổ;
}
thứ, td {
đệm. 5px;
}

Nhận bộ sưu tập CD của tôi

hàm loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
xmlhttp. onreadystatechange = function() {
nếu (cái này. readyState == 4 && cái này. trạng thái == 200) {
myFunction(cái này);
}
};
xmlhttp. open("NHẬN", "cd_catalog. xml", đúng);
xmlhttp. gửi();
}
hàm myFunction(xml) {
tôi;
var xmlDoc = xml. phản hồiXML;
var table="ArtistTitle";
var x = xmlDoc. getElementsByTagName("CD");
cho (i = 0; i