Question

可能是一个非常基本的问题..

但是我有一个简单的表格嵌入图像......所以我们可以这样说

<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>

现在，So Picture1.png在名为Picture1.xml

的文件中有相应的“xml”数据

所以我在这里找到了一个非常简单的解决方案：Display XML content in HTML page

但..我如何从文件中读取这些xml。而且由于图像名称和xml文件名相同，我能这样做吗？

Answer 1

在服务器端执行此操作可能会更好，但问题是关于jQuery和AJAX，因此，假设xml文件位于您自己的域中：

对于每张图片，请创建textarea。为每个textarea设置一个ID，以便您可以将每个图片与正确的textarea相关联。
在jQuery中，使用选择器查找页面上的所有图像班级linksESPN。
使用each函数循环显示这些图像。
获取每张图片的src，替换图片的目录与pdf文件的位置目录和图像的扩展名 pdf。
使用load功能将XML的内容加载到图片的相应textarea中。

Answer 2

听起来您提供的链接与您提出的要求无关。如果我正确理解您的问题，您将尝试解析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 );
            });
        };
    };
});

从文件中读取xml标记并在浏览器上显示

2 个答案: