如何将JavaScript计算输出结果转换为类Excel样式的表格？

Absolutely feasible! Let's refactor your code to display results in a clean, Excel-like table. Here's the complete working version, with breakdowns of the changes below:

Full Updated Code #

<!DOCTYPE html>
<html>
<head>
    <title>Price Calculator</title>
    <style>
        /* Excel-like table styling */
        .price-table {
            border-collapse: collapse;
            margin: 20px 0;
            font-family: Arial, sans-serif;
            font-size: 14px;
            min-width: 400px;
            box-shadow: 0 0 20px rgba(0,0,0,0.15);
        }
        .price-table th, .price-table td {
            padding: 12px 15px;
            border: 1px solid #dddddd;
        }
        .price-table th {
            background-color: #f2f2f2;
            font-weight: bold;
            text-align: left;
        }
        .price-table tr:hover {
            background-color: #f5f5f5;
        }
        .invalid {
            color: #dc3545;
            font-style: italic;
        }
    </style>
</head>
<body>
    <label><strong>Enter NHS Price - <input id="myInput"> </strong></label>

    <table class="price-table">
        <thead>
            <tr>
                <th>Price Category</th>
                <th>Calculated Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><strong>Retail:</strong></td>
                <td id='output1'></td>
            </tr>
            <tr>
                <td><strong>Schools & CDC's:</strong></td>
                <td id='output2'></td>
            </tr>
            <tr>
                <td><strong>Trade - Band A:</strong></td>
                <td id='output3'></td>
            </tr>
            <tr>
                <td><strong>Trade - Band B:</strong></td>
                <td id='output4'></td>
            </tr>
            <tr>
                <td><strong>Trade - Band C:</strong></td>
                <td id='output5'></td>
            </tr>
            <tr>
                <td><strong>Trade - Band D:</strong></td>
                <td id='output6'></td>
            </tr>
        </tbody>
    </table>

    <script>
        "use strict";
        function byId(id){return document.getElementById(id)}
        window.addEventListener('load', onLoaded, false);
        function onLoaded(evt) {
            let input = byId('myInput');
            input.addEventListener('input', onInputReceived, false);
        }
        function onInputReceived(evt) {
            let outputs = [byId('output1'), byId('output2'), byId('output3'), byId('output4'), byId('output5'), byId('output6')];
            let value = parseFloat(this.value);
            
            // Remove invalid class first
            outputs.forEach(el => el.classList.remove('invalid'));
            
            if (!isNaN(value)) {
                outputs[0].textContent = Math.ceil( value / 0.7);
                outputs[1].textContent = Math.ceil( value * 1);
                outputs[2].textContent = Math.ceil( value / 0.7 - (value / 0.7 / 100*40));
                outputs[3].textContent = Math.ceil( value * 1);
                outputs[4].textContent = Math.ceil( value / 0.7 - (value / 0.7 / 100*20));
                outputs[5].textContent = Math.ceil( value / 0.7 - (value / 0.7 / 100*10));
            } else {
                outputs.forEach(el => {
                    el.textContent = "*invalid input (enter a number)*";
                    el.classList.add('invalid');
                });
            }
        }
    </script>
</body>
</html>

Key Changes Explained #

1. HTML Structure Overhaul

   • Replaced the messy <ul> with a proper <table> element, which is purpose-built for tabular data like this.
   • Added a header row (<thead>) for clear column labels, matching Excel's standard table layout.
   • Each price category and its calculated result now sit in aligned table cells, creating that clean, organized look you get in spreadsheets.

2. Excel-like CSS Styling

   • Used border-collapse: collapse to create seamless, merged cell borders just like Excel.
   • Added padding to cells, a light gray header background, and a subtle row hover effect (mimicking Excel's row highlighting when you click or hover).
   • Added an .invalid class to style error messages with red, italicized text for better visibility.

3. JavaScript Tweaks

   • Your core calculation logic stays 100% intact—no changes to how prices are computed!
   • Added a line to remove the .invalid class when valid input is entered, so styling resets properly.
   • Switched to forEach() to loop through output elements when setting error messages, making the code cleaner and less repetitive.

This setup will give you a table that looks and behaves much like an Excel sheet, while keeping all your original price calculation functionality.

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