如何基于重复标题的JSON数据生成单列表格并使用jQuery追加HTML到tr

1. Generated Table #

Based on your JSON data, here's the single-column table you need:

2. jQuery Code to Append HTML to Table Rows #

Since all your titles are "CID", we can simplify the code to avoid redundant header creation. Here's how to modify your existing success callback to generate and append the table content correctly:

success: function (result) {
  console.log(result);
  var data = result.data;
  
  // Step 1: Create and append the single header row (since all titles are CID)
  var headerHTML = '<tr><th class="text-center text-primary">CID</th></tr>';
  // Replace #your-table-id with the actual ID of your table
  $('#your-table-id thead').append(headerHTML);
  
  // Step 2: Loop through the data to create and append each data row
  $.each(data, function(index, cid) {
    var rowHTML = '<tr><td class="text-center">' + cid + '</td></tr>';
    // Append rows to the table body
    $('#your-table-id tbody').append(rowHTML);
  });
}

Key Notes: #

• Replace #your-table-id with the actual ID of your HTML table element.
• Using <thead> and <tbody> sections is semantic and helps keep your table structure organized. If your table doesn’t have these, you can append directly to the table itself.
• We skip looping through the titles array entirely since all values are identical—this makes the code more efficient and cleaner.

If you specifically need to append content to existing <tr> elements (instead of creating new ones), you could adjust the loop to target existing rows and insert <td> elements, but based on your JSON structure, creating new rows for each CID value is the most logical approach.

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