Question

我试图在用户点击图标后在带有数组的表格中显示我的xml。我不知道如何去做，但这是我到目前为止的代码。

           $(function(links) {
             $(".link").click(function() {

                 var xmlDoc = loadXMLDoc("http://localhost/HTML5/images.xml");
                 function loadXMLDoc(dname) {
                 if (window.XMLHttpRequest) {
                xhttp=new XMLHttpRequest();
              }
                else {
                    xhttp=new ActiveXObject("Microsoft.XMLHTTP");
             }
          xhttp.open("GET",dname,false);
          xhttp.send();
          return xhttp.responseXML;
              }


              var linkArray = new Array();
              linkArray[0] = "1";
              var counter = $('#noOfLinks').val();
              $('#myTable').append('<table>,<tbody>');
                  for (i = 0; i < counter; i++) {
                     $('#myTable').append('<tr><td><a href=' + linkArray[i] + '>' + textArray[i] + '</a></td></tr>');
               counter++;
              }
              $('#myTable').append('</tbody>,</table>');

             });
          });

这是我的xml

     <links>
  <link>
    <hyperlink>http://www.imdb.com/title/tt1641349/</hyperlink>
    <sitename>IMBD</sitename>
    <linkalt>Terra Nova</linkalt>
   </link>
   <link>
    <hyperlink>http://en.wikipedia.org/wiki/Terra_Nova_(TV_series)</hyperlink>
    <sitename>WIKIPEDIA</sitename>
    <linkalt>Terra Nova</linkalt>
   </link>  
   </links>

Answer 1

您可以使用jQuery AJAX

大大简化这一过程

 $.get('/path/to/xml/file/', function(data) {
    /* data is full xml response, wrap in `$()` to use jQuery traverse methods*/
    $(data).find('link').each(function() {
      var name = $(this).find('sitename').text();
      var link = $(this).find('hyperlink').text();

      var row = '<tr><td><a href="' + link + '">' + name + '</a></td></tr>';
      $('#myTable').append(row)

    })
  }, 'xml');

出于演示目的简化了输出

的 DEMO

Answer 2

尝试：

xml = $.parseXML(xml); 
var txt = "";
$(xml).find("link").each(function(){
    var href = $(this).find("hyperlink").text();
    var link = $(this).find("sitename").text();
    var alt = $(this).find("linkalt").text();
    txt += "<tr><td><a title='"+alt+"' href='"+href+"'>"+link+"</a></td></tr>";
});
$("table").append(txt);

DEMO here.

Answer 3

...
        var table = $('<table class="table table-condensed table-bordered"></table>');
        var thead = $('<tr><th class="text-center">HyperLink</th><th class="text-center">Site</th><th class="text-center">LnkAlt</th></tr>');
        var trow = $('<tr><td class="text-center"></td><td class="text-left"></td><td class="text-left"></td></tr>');
        table.append(thead);
        $(xml).find('link').each(function () {
            $('td', trow).eq(0).html($(this).find('hyperlink').text());
            $('td', trow).eq(1).html($(this).find('sitename').text());
            $('td', trow).eq(2).html($(this).find('linkalt').text());
            table.append(trow);
            trow = $('tr:last-child', table).clone(false);
        });

...

Javascript在表中显示xml

3 个答案: