Javascript 使用jQuery和XML数据生成表

Javascript 使用jQuery和XML数据生成表,javascript,jquery,html,xml,html-table,Javascript,Jquery,Html,Xml,Html Table,我对jQuery和js都是新手。我试图从XML数据创建一个表,但无法获得正确的输出。以下是我到目前为止的情况: HTML: 期望输出: Mon apple Tues orange Wed banana Thur pear 我想我很接近了,但我就是想不出来。尝试修改XML,使每个水果都在自己的标记中。然后,不要为每个循环找到“每日水果”标签,而是使用“水果”标签 下面是一个JSFIDLE: var xml='MonappleTuesorangeWedbananaThurpear'; xml

我对jQuery和js都是新手。我试图从XML数据创建一个表,但无法获得正确的输出。以下是我到目前为止的情况:

HTML:

期望输出:

Mon  apple
Tues orange
Wed  banana
Thur pear

我想我很接近了,但我就是想不出来。

尝试修改XML,使每个水果都在自己的标记中。然后,不要为每个循环找到“每日水果”标签,而是使用“水果”标签

下面是一个JSFIDLE:

var xml='MonappleTuesorangeWedbananaThurpear';
xmlDoc=$.parseXML(xml),
$xml=$(xmlDoc);
$($xml).each(函数(){
var showTimes=$xml.find('fruit')。每个(函数(){
var$day=$(this.find('day').text();
var$type=$(this.find(“type”).text();
$(“#每日水果”)。查找('tbody')
.append($('')
.append($('')
.附加(天)
.append($('')
.append($type))
)
});
});

给定这样的XML结构,您应该迭代
元素。假设每个
后面总是跟着相应的
元素:

var xml='MonappleTuesorangeWedbananaThurpear';
xmlDoc=$.parseXML(xml),
$xml=$(xmlDoc);
$($xml).each(函数(){
var showTimes=$xml.find('day')。每个(函数(){
var$day=$(this.text();
var$type=$(this).next(“type”).text();
$(“#每日水果”)。查找('tbody')
.append($('')
.append($('')
.附加(天)
.append($('')
.append($type))
)
});
});

Perfect!-这是一个简单而优雅的答案。只要我有能力修改XML数据,在本例中,我会修改。非常感谢!
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
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))
      )
  });
});