使用 jQuery 生成一个包含 XML 数据的表

Generating a table with jQuery with XML data

本文关键字：包含 一个 XML 数据 jQuery 使用      更新时间：2023-09-26

我是jQuery和js的新手。我正在尝试从 XML 数据创建一个表，但我无法正确输出。这是我到目前为止所拥有的：

.HTML：

<table id="daily_fruit">
    <tbody>
    </tbody>
</table>

j查询：

var xml = '<daily_fruit><day>Mon</day><type>apple</type><day>Tues</day><type>orange</type><day>Wed</day><type>banana</type><day>Thur</day><type>pear</type></daily_fruit>';
xmlDoc = $.parseXML(xml),
  $xml = $(xmlDoc);
$($xml).each(function() {
  var showTimes = $xml.find('daily_fruit').each(function() {
    var $day = $(this).find('day').text();
    var $type = $(this).find("type").text();
    $("#daily_fruit").find('tbody')
      .append($('<tr>')
        .append($('<td>')
          .append($day))
      )
      .append($('<td>')
        .append($type))
  });
});

电流输出：

MonTuesWedThur
appleorangebananapear

期望输出：

Mon  apple
Tues orange
Wed  banana
Thur pear

我想我很接近，但我就是想不通。

尝试修改 XML，以便每个水果都在自己的标记中。然后，不要为每个循环找到"daily_fruit"标签，而是使用"水果"标签。

这是一个jsfiddle：https://jsfiddle.net/57wgab88/

var xml = '<daily_fruit><fruit><day>Mon</day><type>apple</type></fruit><fruit><day>Tues</day><type>orange</type></fruit><fruit><day>Wed</day><type>banana</type></fruit><fruit><day>Thur</day><type>pear</type></fruit></daily_fruit>';
xmlDoc = $.parseXML(xml),
  $xml = $(xmlDoc);
$($xml).each(function() {
  var showTimes = $xml.find('fruit').each(function() {
    var $day = $(this).find('day').text();
    var $type = $(this).find("type").text();
    $("#daily_fruit").find('tbody')
      .append($('<tr>')
        .append($('<td>')
          .append($day))
        .append($('<td>')
          .append($type))
      )
  });
});

给定这样的 XML 结构，您应该遍历<day>元素。假设每个<day>后面总是跟着相应的<type>元素：

var xml = '<daily_fruit><day>Mon</day><type>apple</type><day>Tues</day><type>orange</type><day>Wed</day><type>banana</type><day>Thur</day><type>pear</type></daily_fruit>';
xmlDoc = $.parseXML(xml),
  $xml = $(xmlDoc);
$($xml).each(function() {
   var showTimes = $xml.find('day').each(function() {
    var $day = $(this).text();
    var $type = $(this).next("type").text();
    $("#daily_fruit").find('tbody')
      .append($('<tr>')
        .append($('<td>')
          .append($day))
        .append($('<td>')
          .append($type))
      )
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="daily_fruit">
  <tbody>
  </tbody>
</table>

相关文章：