基于HTML和JavaScript实现多表单生成及Excel导出需求

Let's build on your existing single-form export functionality to support creating multiple forms and exporting all their data to a single Excel file. Here's a fully working implementation that sticks to your constraints:

Complete Code #

<!DOCTYPE html>
<html>
<head>
    <title>Multi-Form Excel Exporter</title>
    <style>
        .form-group {
            border: 1px solid #ddd;
            padding: 15px;
            margin: 10px 0;
            border-radius: 5px;
        }
        .form-group h4 {
            margin-top: 0;
            color: #333;
        }
        input {
            margin: 5px 0;
            padding: 8px;
            width: 250px;
        }
        button {
            padding: 10px 15px;
            margin: 10px 5px;
            cursor: pointer;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <h3>Generate Multiple Forms</h3>
    <div>
        <label>Number of forms to create:</label>
        <input type="number" id="formCount" min="1" value="1" required>
        <button onclick="generateForms()">Create Forms</button>
        <button onclick="exportAllData()" style="display:none;" id="exportBtn">Export All to Excel</button>
    </div>

    <div id="formsContainer"></div>

    <!-- Hidden table for Excel generation -->
    <table id="exportTable" style="display:none;">
        <thead>
            <tr>
                <th>Predefined Rule Name</th>
                <th>Monitoring Key (Hex)</th>
            </tr>
        </thead>
        <tbody id="tableBody"></tbody>
    </table>
    <a id="downloadLink" style="display:none;"></a>

    <script>
        function generateForms() {
            const count = parseInt(document.getElementById('formCount').value);
            const container = document.getElementById('formsContainer');
            container.innerHTML = ''; // Clear existing forms

            for (let i = 1; i <= count; i++) {
                const formGroup = document.createElement('div');
                formGroup.className = 'form-group';
                formGroup.innerHTML = `
                    <h4>Form ${i}</h4>
                    <div>
                        <b>Rule name:</b>
                        <input class="predefinedRuleName" required placeholder="Enter rule name">
                    </div>
                    <div>
                        <b>Rating Group Id:</b>
                        <input class="monitoringKey" type="number" required placeholder="Enter numeric ID">
                    </div>
                `;
                container.appendChild(formGroup);
            }

            // Show export button once forms are created
            document.getElementById('exportBtn').style.display = 'inline-block';
        }

        function exportAllData() {
            const tableBody = document.getElementById('tableBody');
            tableBody.innerHTML = ''; // Clear previous data

            // Collect data from all forms
            const ruleNames = document.querySelectorAll('.predefinedRuleName');
            const monitoringKeys = document.querySelectorAll('.monitoringKey');

            // Validate all forms are filled
            let isValid = true;
            ruleNames.forEach(input => {
                if (!input.value.trim()) isValid = false;
            });
            monitoringKeys.forEach(input => {
                if (!input.value.trim()) isValid = false;
            });

            if (!isValid) {
                alert('Please fill out all form fields before exporting!');
                return;
            }

            // Populate table with all form data
            for (let i = 0; i < ruleNames.length; i++) {
                const ruleName = ruleNames[i].value.replace(/\s/g, '');
                const mkValue = parseInt(monitoringKeys[i].value) + 10000;
                const hexValue = mkValue.toString(16).toUpperCase();

                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${ruleName}</td>
                    <td>${hexValue}</td>
                `;
                tableBody.appendChild(row);
            }

            // Generate Excel download
            const table = document.getElementById('exportTable');
            const html = table.outerHTML;
            const url = 'data:application/vnd.ms-excel,' + escape(html);
            const link = document.getElementById('downloadLink');
            
            link.setAttribute('href', url);
            link.setAttribute('download', 'pmi_data_LIVE.xls');
            link.click();
        }
    </script>
</body>
</html>

Key Improvements & Explanations #

• Dynamic Form Generation: The generateForms() function creates the number of forms specified by the user, using class names instead of IDs to avoid conflicts (since IDs must be unique).
• Batch Data Collection: exportAllData() gathers values from all form inputs, validates that every field is filled, then processes each entry just like your original single-form logic (trimming spaces from rule names, converting monitoring IDs to hex after adding 10000).
• Excel Export: We use a hidden table with a <thead> for column headers and a dynamic <tbody> to add rows for each form's data. The export logic is similar to your original code but now handles multiple rows.
• User Experience: Added basic styling to distinguish forms, validation to ensure no empty fields, and only shows the export button once forms are created.

This implementation stays 100% within your constraints (no PHP, only HTML/JS) and builds seamlessly on your existing functionality.

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