基于HTML、JavaScript与Bootstrap的销售数据统计与展示教程

    
    
    
    
    
        #panel, #flip {
            padding: 5px;
            text-align: center;
            background-color: red;
            border: solid 1px white;
            color: white; /* Added for better visibility */
        }
        #panel {
            padding: 50px;
            display: none;
        }
        #logo {
            text-align: left;
            padding: 50px;
        }
        .center {
            margin: auto;
            width: 60%;
            border: none;
            padding: 10px;
            text-align: center; /* Center the button */
        }
        body {
            background-color: black;
            color: white; /* Default text color for body */
        }
        .table th, .table td {
            color: white; /* Ensure table text is white */
        }
        .table input {
            color: red; /* Input field text color */
        }
    


    
@@##@@
    
 点击此处查看描述 
    

        
作为一家汽车经销商，我们将买家与数千个二手车网站匹配，让您无需搜索。

        从您的第一辆车到第十五辆，我们希望让买卖汽车成为您期待的事情。我们正在采用数据驱动和以用户为中心的方法，创造新的、更好的买卖汽车方式。
    

    

        
季度销售额
        

            

                

                    
经销商
                    
销售代表
                    
第一季度
                    
第二季度
                    
第三季度
                    
第四季度
                    
代表最高销售额
                    
代表平均销售额
                
            
            

                

                    
Carmax in Laurel, MD
                    
John Malcavech
                    

                    

                    

                    

                    

                    

                
                

                    
MERCEDES-BENZ OF SILVER SPRING
                    
Moses Aran
                    

                    

                    

                    

                    

                    

                
                

                    
Hertz Car Sales Baltimore
                    
Rachet C. Clinton
                    

                    

                    

                    

                    

                    

                
                

                    
总销售额
                    
-----
                    

                    

                    

                    

                    
-----
                    
-----
                
            
        
        

            计算
        
    
    
        // JavaScript will be placed here
    

    $(document).ready(function() {
        $("#flip").click(function() {
            $("#panel").slideDown("slow");
        });
    });

    function calculate() {
        // 1. 数据收集：将输入框中的销售数据存储到二维数组
        var sales = new Array(3); // 3行，对应3位销售代表
        sales[0] = []; // John Malcavech
        sales[1] = []; // Moses Aran
        sales[2] = []; // Rachet C. Clinton

        // 获取并填充John Malcavech的销售数据
        var s1 = document.getElementsByName('s1[]');
        for (var i = 0; i < s1.length; i++) {
            sales[0].push(s1[i].value);
        }

        // 获取并填充Moses Aran的销售数据
        var s2 = document.getElementsByName('s2[]');
        for (var i = 0; i < s2.length; i++) {
            sales[1].push(s2[i].value);
        }

        // 获取并填充Rachet C. Clinton的销售数据
        var s3 = document.getElementsByName('s3[]');
        for (var i = 0; i < s3.length; i++) {
            sales[2].push(s3[i].value);
        }

        // 2. 计算每季度的总销售额
        var totalSalesPerQuarter = []; // 存储每个季度的总销售额
        var overallTotalSales = 0; // 所有季度的总销售额

        // 遍历列（季度）
        for (var col = 0; col < sales[0].length; ++col) {
            var currentQuarterTotal = 0; // 当前季度的总销售额
            // 遍历行（销售代表）
            for (var row = 0; row < sales.length; ++row) {
                currentQuarterTotal += parseInt(sales[row][col] || 0); // 确保转换为数字，处理空值
                overallTotalSales += parseInt(sales[row][col] || 0);
            }
            totalSalesPerQuarter.push(currentQuarterTotal);
            // 将结果显示在表格底部对应的“总销售额”输入框中
            document.getElementsByName('total[]')[col].value = currentQuarterTotal;
        }
        // console.log("所有季度总销售额: " + overallTotalSales); // 可以用console.log代替alert

        // 3. 找出每位销售代表的最高单季度销售额
        // 遍历行（销售代表）
        for (var row = 0; row < sales.length; ++row) {
            // 初始化当前销售代表的最高销售额为第一个季度的值
            var highestSaleForRep = parseInt(sales[row][0] || 0);
            // 遍历列（季度）
            for (var col = 0; col  highestSaleForRep) {
                    highestSaleForRep = currentSale;
                }
            }
            // 将结果显示在对应的“代表最高销售额”输入框中
            var highId = "high" + (row + 1);
            document.getElementById(highId).value = highestSaleForRep;
        }

        // 4. 计算每位销售代表的平均销售额 (修正后的逻辑)
        // 遍历行（销售代表）
        for (var row = 0; row < sales.length; ++row) {
            var totalSalesForRep = 0; // 当前销售代表的总销售额
            // 遍历列（季度）以累加当前代表的所有季度销售额
            // 关键修正：循环条件应为 sales[0].length (即季度数)
            for (var col = 0; col < sales[0].length; ++col) {
                totalSalesForRep += parseInt(sales[row][col] || 0);
            }

            // 在内层循环结束后，计算平均值
            var numberOfQuarters = sales[0].length; // 获取季度数量，此处为4
            var averageSalesForRep = totalSalesForRep / numberOfQuarters;

            // 将结果显示在对应的“代表平均销售额”输入框中
            var avgId = "avg" + (row + 1); // 构建正确的ID，如 "avg1", "avg2", "avg3"
            document.getElementById(avgId).value = averageSalesForRep.toFixed(2); // 保留两位小数
        }
    }

    
    
    
    
    
        #panel, #flip {
            padding: 5px;
            text-align: center;
            background-color: red;
            border: solid 1px white;
            color: white;
        }
        #panel {
            padding