从文件中读取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标记和浏览器

回答

相关问题