如何通过jQuery的createMovieTable函数正确添加电影数据并生成HTML表格

Let's walk through fixing your plugin step by step — there are several small but critical issues preventing it from working correctly:

Key Problems in Your Original Code #

• Incorrect Object Property Access: Your movies variable is an object (not an array), so movies.movie + [i + 1].movieTitle is invalid syntax. You need to use computed property names to access each movie entry.
• Duplicate Table Insertion: You're appending the entire <table> element inside your loop, which would create multiple tables instead of one table with multiple rows.
• Global Selector Conflict: Using $('.tbody') targets all <tbody> elements on the page, not just the one inside your new table.
• HTML Syntax Error: The href attribute on your edit link has extra quotes (href=''#collapse-showtime-1'), which breaks the link functionality.
• Unnecessary Insertion Methods: Using insertAfter repeatedly makes the code harder to read; you can simplify by appending elements directly to their parent.

Corrected Plugin Code #

(function($) {
  $.fn.createMovieTable = function(moviesNum, movies) {
    // Create the table once, outside the loop
    var $table = $("<table class='table table-movie bg-darkpink m-0'><tbody class='tbody'></tbody></table>");
    var $tbody = $table.find('.tbody'); // Target the specific tbody in our new table

    // Append the table to the target element first
    this.append($table);

    for (var i = 0; i < moviesNum; ++i) {
      var movieKey = `movie${i + 1}`; // Dynamically generate the movie key (movie1, movie2, etc.)
      var currentMovie = movies[movieKey]; // Access the movie object using the computed key

      var $tableRow = $("<tr class='tr'></tr>");
      
      // Build each cell element
      var $movieCounter = $("<th scope='row' class='align-middle text-center'><h2>" + (i + 1) + "</h2></th>");
      var $moviePicture = $("<td><img src='movie-pics/" + (i + 1) + ".png' class='img-fluid img-thumbnail img-movie' alt='Responsive image'></td>");
      var $movieTitle = $("<td class='align-middle text-center'><h2 style='color: #647fde;'>" + currentMovie.movieTitle + "</h2><a class='custom-link' data-toggle='collapse' href='#collapse-showtime-" + (i + 1) + "' aria-expanded='false' aria-controls='collapseExample'>Edit Movie <i class='fa fa-caret-down' aria-hidden='true'></i></a></td>");
      var $deleteButton = $("<td class='align-middle text-center'><button type='button' class='btn custom-btn cb-dark-hover no-br delete-movie-btn'>Delete</button></td>");

      // Append all cells to the row, then append the row to the tbody
      $tableRow.append($movieCounter, $moviePicture, $movieTitle, $deleteButton);
      $tbody.append($tableRow);
    }

    return this; // Maintain jQuery chainability for method chaining
  };
})(jQuery);

What Changed & Why #

1. Computed Property Names: We use movie${i + 1} to dynamically generate the key for each movie (e.g., movie1, movie2), then access the movie object with movies[movieKey] — this correctly targets each entry in your object.
2. Single Table Insertion: The table is created once and appended to the target element outside the loop, so we only get one table instead of multiple duplicates.
3. Targeted tbody Selection: $table.find('.tbody') ensures we only modify the tbody inside our new table, not any other tbody elements on the page.
4. Fixed HTML Link: The href attribute now correctly uses #collapse-showtime-${i + 1} — we also made the collapse ID dynamic so each edit link targets a unique element.
5. Simplified Appending: Using append() with multiple arguments makes the code cleaner and easier to follow, instead of relying on repeated insertAfter calls.
6. Chainability: Returning this lets you chain other jQuery methods to the target element (e.g., $('.movies-table').createMovieTable(3, movies).addClass('some-class')).

Your Updated Usage Code #

This should work seamlessly with the corrected plugin:

var movies = { 
  movie1: { movieTitle: 'Blade Runner 2049' }, 
  movie2: { movieTitle: 'Justice League' }, 
  movie3: { movieTitle: 'Thor: Ragnarok' } 
}; 

$('.movies-table').createMovieTable(3, movies);

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