如何使用jQuery读取XML数据并在表格中展示？

Got it, let's build a working solution to load your movie.xml data and render it in a table with jQuery. I'll walk you through the complete setup, including handling the nested session times.

Step 1: Valid Sample XML (Completed) #

First, let's fix up your partial XML to make it well-formed (since the original was cut off):

<Dataset>
  <Record>
    <Movie_Title>Breath</Movie_Title>
    <Genre>Horror</Genre>
    <Cinema_number>1</Cinema_number>
    <price>8.50</price>
    <Director>Simon Baker</Director>
    <Sessions>
      <Date>Monday</Date>
      <Time>9:30</Time>
      <Time>11:30</Time>
      <Time>13:30</Time>
      <Time>15:30</Time>
    </Sessions>
  </Record>
  <!-- Add more <Record> entries as needed -->
</Dataset>

Step 2: HTML Table Structure #

Create a table in your HTML to hold the movie data. We'll use an empty <tbody> where jQuery will inject the rows:

<!DOCTYPE html>
<html>
<head>
  <title>Movie Schedule</title>
  <!-- Include jQuery (use a local copy or CDN) -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
  <h2>Movie Showtimes</h2>
  <table id="movieTable" border="1" cellpadding="8" cellspacing="0">
    <thead>
      <tr>
        <th>Movie Title</th>
        <th>Genre</th>
        <th>Cinema Number</th>
        <th>Price</th>
        <th>Director</th>
        <th>Session Times</th>
      </tr>
    </thead>
    <tbody>
      <!-- Data will be inserted here -->
    </tbody>
  </table>

  <!-- Your jQuery script goes here -->
</body>
</html>

Step 3: jQuery Code to Load and Parse XML #

Add this script right before the closing </body> tag. It fetches the XML, parses each movie record, and builds table rows dynamically:

$(document).ready(function() {
  // Fetch the XML file
  $.ajax({
    url: 'movie.xml', // Ensure this path matches your file location
    dataType: 'xml',
    success: function(xml) {
      // Loop through each <Record> element in the XML
      $(xml).find('Record').each(function() {
        // Extract basic movie details
        const title = $(this).find('Movie_Title').text();
        const genre = $(this).find('Genre').text();
        const cinemaNum = $(this).find('Cinema_number').text();
        const price = $(this).find('price').text();
        const director = $(this).find('Director').text();

        // Process nested session data (date + multiple times)
        const sessionDate = $(this).find('Sessions Date').text();
        const sessionTimes = [];
        $(this).find('Sessions Time').each(function() {
          sessionTimes.push($(this).text());
        });
        const formattedSessions = `${sessionDate}: ${sessionTimes.join(', ')}`;

        // Build a table row string
        const tableRow = `
          <tr>
            <td>${title}</td>
            <td>${genre}</td>
            <td>${cinemaNum}</td>
            <td>$${price}</td>
            <td>${director}</td>
            <td>${formattedSessions}</td>
          </tr>
        `;

        // Append the row to the table body
        $('#movieTable tbody').append(tableRow);
      });
    },
    error: function() {
      alert('Oops! Failed to load the movie data. Check your XML file path.');
    }
  });
});

Key Notes #

• jQuery Inclusion: Make sure you include jQuery before your custom script (either via CDN like the example, or a local file).
• File Path: Double-check that movie.xml is in the same directory as your HTML file, or adjust the url in $.ajax to match its location (e.g., 'data/movie.xml' if it's in a subfolder).
• Handling Multiple Records: The script will automatically loop through all <Record> elements in your XML, so you can add as many movies as you want.

内容的提问来源于stack exchange，提问作者user9557519