Question

我目前正在尝试将XML文件注入我的HTML，然后将其显示在表格中。我将在下面展示XML的一小部分：

<?xml version="1.0" encoding="UTF-8"?>
<product top-level-category="DSLR" sub-level-category="Camera Bundles">
    <id>0001</id>
    <title>NIKON D3300 DSLR Camera with 18-55 mm f/3.5-5.6 II ED Zoom Lens – BlacK</title>
    <brand>Nikon</brand>
    <price>279.00</price>
    <description>The Nikon D3300 DSLR Camera with 18-55 mm f/3.5-5.6 II ED Zoom Lens allows you to capture special moments in glorious high quality. Unforgettable memories, unforgettable photos. Small and lightweight, the D3300 has a 24.2 megapixel, 23.5 x 15.6 mm CMOS sensor with remarkable light sensitivity that produces amazingly sharp images. It performs well in low light with an ISO range of 100 to 12800 (extendable to 25600). Your images will be packed with fine textures and natural colours to really capture the atmosphere of whichever situation you find yourself in. Capture clear, colourful photographs in all manner of lighting conditions as the camera's EXPEED 4 image processor goes to work, delivering gorgeous photos every time.</description>
</product>

考虑到标签ID，标题，品牌，价格和描述，我开始尝试编写一个jQuery（跟随）尝试将其链接到表格，但我已经因为它不起作用而停滞不前。

$(document).ready(function() {
  $.ajax({
    type: "GET",
    url: "productsXmlStructure.xml",
    dataType: "xml",
    success: function(xml){
      $('#t01').append('<th>ID</th>'); 
      $('#t01').append('<table id="show_table">'); 
      $(xml).find('show').each(function(){
        var $show = $(this);
        var id = $show.find('ID').text();
        var title = $show.find('Title').text();
        var brand = $show.find('Brand').text();
        var price = $show.find('Price').text();
        var desc = $show.find('Description').text();
      });
    }
  });
});

我没有很多关于语言的知识，但我的表格如下。不完全确定我在哪里出错了所以任何帮助都会受到赞赏。

<table id="t01" table border="2" style="width:75%" table align="center">
  <tr>
    <th>ID</th>
    <th>Title</th>
    <th>Brand</th>
    <th>Price</th>
    <th>Description</th>
  </tr>
</table>

Answer 1

使用filter代替find
product代替show（根据XML）
对product的每个#t01追加行。
对于每个属性，将单元格附加到包含数据的上一行。

var xml = '<?xml version="1.0" encoding="UTF-8"?> <product top-level-category="DSLR" sub-level-category="Camera Bundles"> <id>0001</id> <title>NIKON D3300 DSLR Camera with 18-55 mm f/3.5-5.6 II ED Zoom Lens – BlacK</title> <brand>Nikon</brand> <price>279.00</price> <description>The Nikon D3300 DSLR Camera with 18-55 mm f/3.5-5.6 II ED Zoom Lens allows you to capture special moments in glorious high quality. Unforgettable memories, unforgettable photos. Small and lightweight, the D3300 has a 24.2 megapixel, 23.5 x 15.6 mm CMOS sensor with remarkable light sensitivity that produces amazingly sharp images. It performs well in low light with an ISO range of 100 to 12800 (extendable to 25600). Your images will be packed with fine textures and natural colours to really capture the atmosphere of whichever situation you find yourself in. Capture clear, colourful photographs in all manner of lighting conditions as the camera\'s EXPEED 4 image processor goes to work, delivering gorgeous photos every time.</description></product>';

$(xml).filter('product').each(function(){
  var $show = $(this);
  var data = {
    id: $show.find('ID').text(),
    title: $show.find('Title').text(),
    brand: $show.find('Brand').text(),
    price: $show.find('Price').text(),
    desc: $show.find('Description').text()
  };

  var row = $('<tr />');
  for (var prop in data) {
    $('<td>' + data[prop] + '</td>').appendTo(row);  
  }
  
  $('#t01').append(row);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="t01" table border="2" style="width:75%" table align="center">
  <tr>
    <th>ID</th>
    <th>Title</th>
    <th>Brand</th>
    <th>Price</th>
    <th>Description</th>
  </tr>
</table>

将XML数据注入HTML表

1 个答案: