從文件中讀取XML標記和瀏覽器

但是我有圖像的簡單表嵌入...因此，可以說這樣的事情

<tr> 
    <td align="center"> 

     <img src="wiki-thumbs/Picture1.png" height="55%" width="80%" class="linksESPN" /> 

    </td> 
    <td align="center"> 

     <img src="wiki-thumbs/Picture2.png" height="55%" width="80%" class="linksESPN" /> 

    </td> 
    </tr>

現在，所以Picture1.png有相應的「XML」數據文件名爲Picture1.xml

所以，我發現了一個很簡單的解決方案在這裏：Display XML content in HTML page

但是...我如何讀取ŧ hese文件中的xml。而那也是因爲像名和XML文件名相同..我可以做到這一點巧妙？

來源

2013-03-09 Fraz

@ scott.korin：將上方和下方的XML文本區域。將它保存爲html ..然後鏈接它頁面到這裏的單元格？ – Fraz 2013-03-09 18:59:40

它可能是更好地做到這在服務器端，但問題詢問jQuery和AJAX，所以，假設XML文件是自己的域名中：

對於每一個圖像，創建一個textarea。設置每個textarea的ID，這樣就可以用正確的textarea每個圖像相關。
在jQuery中，使用選擇器查找頁面上的所有圖像，並使用類linksESPN。
通過使用each函數那些圖像環路。
獲取每個圖像的src，與PDF文件的位置，並與 pdf圖像的擴展名的目錄替換圖像的目錄。
使用load函數將XML的內容加載到圖像對應的textarea中。

來源

2013-03-09 19:06:16

這聽起來不像你提供的鏈接與你的要求有任何關係。如果我理解你的問題正確，您試圖解析XML數據並將其插入到HTML表格。你可以使用jQuery來做到這一點。

而不是創建爲每個圖像一個XML文件中，你應該只創建了適用於所有影像數據一個XML文件。這樣你只需要做一個http請求。

下面是一個例子：

XML

<?xml version="1.0"?> 
<images> 
    <image id="img1"> 
     <details> 
      Here is a bunch of details for image 1. 
     </details> 
    </image> 
    <image id="img2"> 
     <details> 
      Here is a bunch of details for image 2. 
     </details> 
    </image> 
</images>

HTML

<table id="table"> 
    <tr> 
     <td> 
      <img src="img1.png" alt="img" /> 
      <div id="img1" class="details"> 

      </div> 
     </td> 
     <td> 
      <img src="img2.png" alt="img" /> 
      <div id="img2" class="details"> 

      </div> 
     </td> 
    </tr> 
</table>

jQuery的

$(function(){ 

    // Make an ajax call to the server to get the xml file. 
    $.ajax({ 
     // The URL where the xml file exists. 
     url: 'data.xml' 
    }) 
    // Jquery's callback that handles a failed request. I'm just logging the message to the console. 
    .fail(function(jqXHR, textStatus){ console.log(textStatus); }) 
    // Jquery's callback that handels success. Here Im executing the insertData() function. 
    .done(insertData()); 


    function insertData(){ 
     // The .done() method is expecting a funciton as it's parameter so we are returning one. 
     // .done() executes that function passing the requested data in. 
     // I named it data. 
     return function(data){ 

      // You can parse the xml data using jquery selection methods. I'm using find(). 
      // This gets all the <image> object from our xml. 
      var images = $(data).find('image'); 

      // For each <image> object do the following. 
      images.each(function(){ 

       // Find the id of the <image> object. 
       var id = $(this).attr('id'); 
       // Find the text of the <image> object. 
       var text = $(this).find('details').text(); 

       // I chose to associate the table elements in the html with the xml data via an id attribute. 
       // The data in the xml has the same id as the details div in my html. 
       // Here I just select the details div and insert the text that we got from above. 
       $('#'+id).text(text); 
      }); 
     }; 
    }; 
});

來源

2013-03-09 20:48:34

從文件中讀取XML標記和瀏覽器

回答

相關問題