将JQuery结果格式化为HTML表

Question

Hi I'm Parsing an XML File within my web page through XML like so:

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();
}

My XML File looks like so:

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

I have a HTML table, formatted like a Time Table which has 5 Table Headers, and then 5 Table Rows for the Students. Basically my question is how can I format the results from my JQuery Parsing into the table in order to give a structured view as being new to JQuery/XML I'm finding it hard to implement the parsing results into my table.

Answer 1

Since I believe your XML doesn't make sense, I rewrote it and show how to use that to build a table:

<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>

Note the first var is only to acquire an XML source (see the fiddle for details):

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');

Gives us:

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