基于JavaScript实现多股票表格年度%change列求和方案问询

Hey there! Let’s work through this problem together. You’ve got an app that generates separate tables for each stock, and you need to calculate the total %change for each year by adding up the values from all tables (like 2014’s total being 7.88 + 1.69, 2015’s being -11.24 + 6.44, etc.). Here’s a practical, flexible JavaScript approach to make this happen:

Step 1: Structure Your HTML for Easy Targeting #

First, make sure your table cells have consistent class names so we can reliably grab the year and %change values. For example:

<!-- Stock Table 1 -->
<table class="stock-table">
  <thead>
    <tr>
      <th>Year</th>
      <th>%Change</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="year">2014</td>
      <td class="change-percent">7.88%</td>
    </tr>
    <tr>
      <td class="year">2015</td>
      <td class="change-percent">-11.24%</td>
    </tr>
  </tbody>
</table>

<!-- Stock Table 2 -->
<table class="stock-table">
  <thead>
    <tr>
      <th>Year</th>
      <th>%Change</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="year">2014</td>
      <td class="change-percent">1.69%</td>
    </tr>
    <tr>
      <td class="year">2015</td>
      <td class="change-percent">6.44%</td>
    </tr>
  </tbody>
</table>

Step 2: Write the JavaScript Logic #

This code will scan all your tables, collect the %change values per year, sum them up, and display the results:

// Initialize an object to hold the total %change for each year
const annualChangeTotals = {};

// Grab all table rows that contain year and %change cells
const allStockRows = document.querySelectorAll('.stock-table tbody tr');

// Loop through each row to extract data
allStockRows.forEach(row => {
  const yearElement = row.querySelector('.year');
  const changeElement = row.querySelector('.change-percent');

  if (yearElement && changeElement) {
    // Clean up the year text and convert %change to a number
    const year = yearElement.textContent.trim();
    const changeValue = parseFloat(changeElement.textContent.trim().replace('%', ''));

    // Add to the total for this year (or initialize if it's the first entry)
    if (annualChangeTotals[year]) {
      annualChangeTotals[year] += changeValue;
    } else {
      annualChangeTotals[year] = changeValue;
    }
  }
});

// Log the totals to check (optional)
console.log('Annual %Change Totals:', annualChangeTotals);

// Create a summary table to display the results
const summaryTable = document.createElement('table');
summaryTable.classList.add('summary-table');
summaryTable.innerHTML = `
  <thead>
    <tr>
      <th>Year</th>
      <th>Total %Change</th>
    </tr>
  </thead>
  <tbody>
    ${Object.entries(annualChangeTotals).map(([year, total]) => `
      <tr>
        <td>${year}</td>
        <td>${total.toFixed(2)}%</td>
      </tr>
    `).join('')}
  </tbody>
`;

// Add the summary table to your page (adjust the container as needed)
document.body.appendChild(summaryTable);

Key Notes for Adaptation #

• Class Names: Adjust .year, .change-percent, and .stock-table to match your actual HTML class names.
• Handling % Symbols: The code uses replace('%', '') to strip the percentage sign before converting to a number—keep this if your values include the symbol.
• Scalability: This works for 2 tables or 10+ tables, since it loops through all rows across all stock tables.
• Display Options: Instead of a new table, you could add the totals to an existing section, a modal, or even update the original tables with a "Total" row.

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