基于jQuery实现HTML动态表格：处理AJAX返回的Feature列JSON数据

Got it, let's break down how to turn your dynamic JSON data into the pivot table you need. The key here is handling the dynamic Feature columns and mapping each ProteinID's counts correctly. Here's a step-by-step implementation:

Step 1: Process the JSON Data #

First, we'll transform the raw data into a structure that's easier to work with—grouping by ProteinID and capturing all unique Features for our table columns.

Step 2: Build the Table Dynamically #

Using jQuery, we'll construct the table header and rows based on the processed data, filling in '-' where a ProteinID doesn't have a count for a Feature.

Here's the complete code:

JavaScript (jQuery)

// Replace this with your actual AJAX response data
const data = [{ ProteinID: "2334", Feature: "GVN", Count: 1 }, { ProteinID: "2334", Feature: "LPA", Count: 3 }, { ProteinID: "2334", Feature: "EEG", Count: 2 }, { ProteinID: "2334", Feature: "VEP", Count: 3 }, { ProteinID: "2334", Feature: "AEM", Count: 2 }, { ProteinID: "28731", Feature: "GVN", Count: 3 }, { ProteinID: "28731", Feature: "LPA", Count: 3 }, { ProteinID: "28731", Feature: "VEP", Count: 3 }, { ProteinID: "1234", Feature: "VEP", Count: 3 }, { ProteinID: "1234", Feature: "MOB", Count: 3 }];

// Extract all unique Feature values to use as dynamic table columns
const allFeatures = [...new Set(data.map(item => item.Feature))];

// Group data by ProteinID for quick lookup of Feature counts
const proteinData = {};
data.forEach(item => {
  if (!proteinData[item.ProteinID]) {
    proteinData[item.ProteinID] = {};
  }
  proteinData[item.ProteinID][item.Feature] = item.Count;
});

// Create the base table element
const $table = $('<table>').addClass('feature-pivot-table');

// Build the header row
const $headerRow = $('<tr>');
$headerRow.append($('<th>').text('ProteinID'));
allFeatures.forEach(feature => {
  $headerRow.append($('<th>').text(feature));
});
$table.append($headerRow);

// Build data rows for each ProteinID
Object.keys(proteinData).forEach(proteinId => {
  const $dataRow = $('<tr>');
  $dataRow.append($('<td>').text(proteinId));
  
  allFeatures.forEach(feature => {
    // Use the count if available, else show '-'
    const cellValue = proteinData[proteinId][feature] ? proteinData[proteinId][feature] : '-';
    $dataRow.append($('<td>').text(cellValue));
  });
  
  $table.append($dataRow);
});

// Append the finished table to your page container (adjust selector as needed)
$('#table-container').append($table);

Optional CSS for Styling

To make the table clean and readable:

.feature-pivot-table {
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  width: 100%;
  margin: 20px 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.feature-pivot-table th, .feature-pivot-table td {
  border: 1px solid #ddd;
  padding: 10px 12px;
  text-align: left;
}

.feature-pivot-table th {
  background-color: #f5f5f5;
  font-weight: 600;
}

.feature-pivot-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

How It Works #

• Dynamic Column Handling: We use a Set to collect all unique Feature values from the data, so the table will automatically adapt to whatever Features come back from your database.
• Efficient Data Lookup: Grouping the data by ProteinID lets us quickly check if a Feature exists for that Protein and retrieve its count without re-looping through the entire dataset.
• Flexible Row Construction: For each ProteinID, we build a row and fill each column with the corresponding count or '-' if the Feature isn't present for that entry.

Just swap the hardcoded data variable with the result from your AJAX call, and ensure you have a container element (like a <div id="table-container">) on your page to hold the generated table.

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