如何用JavaScript生成含电影标题与海报的表格？需结合表单及元素数组

Got it, let's walk through exactly how to build that movie table with JavaScript on your movies.html page—including posters, forms, and element arrays like you asked! Here's a step-by-step solution with full code examples:

Step 1: Set up the base movies.html structure #

First, we'll create the HTML skeleton with a form (for interaction) and a container where our JavaScript will inject the table. We'll add basic styling to keep things clean:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Favorite Movies</title>
    <style>
        table { border-collapse: collapse; width: 80%; margin: 20px auto; }
        th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
        th { background-color: #f2f2f2; }
        img { width: 100px; height: auto; object-fit: cover; }
        form { text-align: center; margin: 20px 0; }
        button { padding: 8px 16px; cursor: pointer; }
    </style>
</head>
<body>
    <h1>Top 5 Movies</h1>
    <!-- Form with a button to trigger table generation -->
    <form id="movieForm">
        <button type="button" id="buildTableBtn">Show Movie Table</button>
    </form>
    <!-- Container where JS will insert the table -->
    <div id="tableContainer"></div>

    <script>
        // Your JavaScript will go here
    </script>
</body>
</html>

Step 2: Add the JavaScript logic #

Now we'll fill in the <script> tag with code that:

1. Stores your movie data in an array (your "elements array" requirement)
2. Interacts with the form elements
3. Dynamically builds and injects the table with titles and posters

Here's the complete JavaScript code to add inside the <script> tag:

// 1. Store your movie data in an array (easy to update/maintain!)
const movieData = [
    { title: "The Shawshank Redemption", poster: "https://example.com/shawshank-poster.jpg" },
    { title: "The Godfather", poster: "https://example.com/godfather-poster.jpg" },
    { title: "Inception", poster: "https://example.com/inception-poster.jpg" },
    { title: "Pulp Fiction", poster: "https://example.com/pulp-fiction-poster.jpg" },
    { title: "Forrest Gump", poster: "https://example.com/forrest-gump-poster.jpg" }
];

// 2. Access form elements as an array (demonstrating element arrays usage)
const formElements = document.getElementById('movieForm').elements;
console.log("Form elements array:", formElements); // Check your browser console to see this array

// 3. Function to build the movie table dynamically
function buildMovieTable() {
    const container = document.getElementById('tableContainer');
    // Clear existing content (in case user clicks the button multiple times)
    container.innerHTML = '';

    // Create table elements
    const table = document.createElement('table');
    const headerRow = document.createElement('tr');
    const body = document.createElement('tbody');

    // Add table headers
    const titleHeader = document.createElement('th');
    titleHeader.textContent = "Movie Title";
    const posterHeader = document.createElement('th');
    posterHeader.textContent = "Poster";
    headerRow.append(titleHeader, posterHeader);
    table.appendChild(headerRow);

    // Loop through movie data to create table rows
    movieData.forEach(movie => {
        const row = document.createElement('tr');

        // Title cell
        const titleCell = document.createElement('td');
        titleCell.textContent = movie.title;

        // Poster cell with image
        const posterCell = document.createElement('td');
        const posterImg = document.createElement('img');
        posterImg.src = movie.poster;
        posterImg.alt = `${movie.title} Movie Poster`; // Accessible alt text
        posterCell.appendChild(posterImg);

        row.append(titleCell, posterCell);
        body.appendChild(row);
    });

    table.appendChild(body);
    container.appendChild(table);
}

// 4. Trigger the table build: either on page load OR button click
// Auto-generate table when page loads
window.addEventListener('load', buildMovieTable);
// OR/AND trigger when the form button is clicked
document.getElementById('buildTableBtn').addEventListener('click', buildMovieTable);

Key Details to Note: #

• Movie Data Array: We use an array of objects to store each movie's title and poster URL—this is your "elements array" in action, making it simple to add/remove movies later.
• Form Element Array: document.getElementById('movieForm').elements returns a collection of all elements inside the form (like our button), which acts like an array you can iterate over or access by index.
• Dynamic Table Creation: Instead of hardcoding HTML, we use createElement to build the table programmatically. This is more flexible and less error-prone than string concatenation.
• Poster Images: Replace the example poster URLs with your actual image paths (local files like ./posters/shawshank.jpg work too!).

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