Question

您好我在我的网页中通过XML解析XML文件，如下所示：

function loadCards(lang)
{
    $.ajax({
        type: "GET",
        url: 'data.xml',
        dataType: "xml",
        success: function (xml) { parseDataXml(xml, lang); }
    });
}

function parseDataXml(xml, lang)
{
    var $xml = $(xml),
        name = $xml.find('name[lang="' + lang + '"]').text(),
        start = $xml.find('start[lang="' + lang + '"]').text();
        end = $xml.find('end[lang="' + lang + '"]').text();
}

我的XML文件如下：

<student id = 1>
    <bob>
        <name>English</name>
        <start>9.00am</start>
        <end>11.00am</end>
    </bob>
</student>

我有一个HTML表格，格式化为时间表，其中有5个表格标题，然后是5个表格用于学生。基本上我的问题是如何将我的JQuery Parsing的结果格式化到表中，以便为JQuery / XML提供结构化视图我发现很难将解析结果实现到我的表中。

Answer 1

由于我认为您的XML没有意义，我重写了它并展示如何使用它来构建表：

<students>
  <student id="1" name="Bob">
      <class name="English" days="MWF" start="9:00am" end="11:00am"/>
      <class name="History" days="MWF" start="1:00pm" end="3:00pm"/>
      <class name="Math" days="TT" start="9:00am" end="12:00pm"/>
  </student>
  <student id="2" name="Sally">
      <class name="Algebra" days="MWF" start="9:00am" end="11:00am"/>
      <class name="Political Science" days="MWF" start="1:00pm" end="3:00pm"/>
  </student>
  <student id="3" name="Jim">
      <class name="Spanish" days="MWF" start="9:00am" end="11:00am"/>
      <class name="Calculus" days="MWF" start="1:00pm" end="3:00pm"/>
      <class name="History" days="TT" start="9:00am" end="1:00pm"/>
  </student>
  <student id="4" name="Erin">
      <class name="AP English" days="F" start="9:00am" end="3:00pm"/>
  </student>
</students>

请注意，第一个var仅用于获取XML源（有关详细信息，请参阅小提琴）：

var $xml = $($('#xml').text()),
    $table = $('<table>'),
    $rows = $('<tbody>');

$xml.find('student class').each(function ea(){
    var $class = $(this),
        $student = $class.closest('student');

    $rows.append(
        '<tr>' +
        '  <td>' + $student.attr('id') + '</td>' +
        '  <td>' + $student.attr('name') + '</td>' +
        '  <td>' + $class.attr('name') + '</td>' +
        '  <td>' + $class.attr('days') + '</td>' +
        '  <td>' + $class.attr('start') + '</td>' +
        '  <td>' + $class.attr('end') + '</td>' +
        '</tr>'
    );
});

$table
    .append(
        '<thead>' +
        '  <tr>' +
        '    <th>ID</th>' +
        '    <th>Name</th>' +
        '    <th>Class</th>' +
        '    <th>Days</th>' +
        '    <th>Start</th>' +
        '    <th>End</th>' +
        '  </tr>' +
        '</thead>'
    )
    .append($rows)
    .appendTo('body');

给我们：

ID  Name   Class              Days  Start   End
----------------------------------------------------
1   Bob    English            MWF   9:00am  11:00am
1   Bob    History            MWF   1:00pm  3:00pm
1   Bob    Math               TT    9:00am  12:00pm
2   Sally  Algebra            MWF   9:00am  11:00am
2   Sally  Political Science  MWF   1:00pm  3:00pm
3   Jim    Spanish            MWF   9:00am  11:00am
3   Jim    Calculus           MWF   1:00pm  3:00pm
3   Jim    History            TT    9:00am  1:00pm
4   Erin   AP English         F     9:00am  3:00pm

<强> http://jsfiddle.net/xpEWx/2

将JQuery结果格式化为HTML表格

1 个答案: