时间戳

首页 > 解决方案 > 我可以制作一个按钮，将计算销售佣金的列添加到我的表中吗

javascript - 我可以制作一个按钮，将计算销售佣金的列添加到我的表中吗

问题描述

我正在做一个学校项目，我需要创建一个程序来计算我们公司员工的佣金。到目前为止，我有一个可以上传数据文件并将其放入表格的地方。我想添加一个按钮来计算每个员工的销售佣金，并在表格中添加一个包含计算出的销售佣金的新列。

data file:
Name,Sales,Commission,Region
Billy Bradshaw,$33611,20%,North
Twanna Beagle,$44250,20%,East
Gloria Saling,$49278,20%,West 
Theola Spargo,$75021,20%,South
Giovanni Armas,$59821,20%,East 
Cristal Smith,$44597,20%,West 
Ashley Morris,$55597,20%,North
Tiffaney Kreps,$40728,20%,South
Arnold Fultz,$49674,20%,East
Sherman Sallee,$23780,20%,North
Shawana Johnson,$58365,20%,West 
Kathrine Mosca,$67489,20%,North
Karren Mahmoud,$53382,20%,East
Venus Grasser,$33572,20%,West 
Rickey Jones,$28522,20%,East
Verona Strauch,$41865,20%,North
Elvis Yearta,$25314,20%,South
Jonathan Lee,$22823,20%,West 
Sommer Cottle,$45660,20%,East
Elsa Laverty,$49386,20%,North

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Sales Commission Calculator</title>
    <h1>Sales Commission Calculator</h1>
    <p>Please select the Employee Sales Database</p>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        table
        {
            border: 1px solid rgb(155, 155, 155);
            border-collapse: collapse;
        }
        tr:nth-child(even) {
            background: #4ac5fd;
        }

        table td
        {
            padding: 5px;
        }
    </style>
</head>
<body>
    <script>
        function Upload() {
            var fileUpload = document.getElementById("fileUpload");
            var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
            if (regex.test(fileUpload.value.toLowerCase())) {
                if (typeof (FileReader) != "undefined") {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var table = document.createElement("table");
                        var rows = e.target.result.split("\n");
                        for (var i = 0; i < rows.length; i++) {
                            var cells = rows[i].split(",");
                            if (cells.length > 1) {
                                var row = table.insertRow(-1);
                                for (var j = 0; j < cells.length; j++) {
                                    var cell = row.insertCell(-1);
                                    cell.innerHTML = cells[j];
                                }
                            }
                        }
                        var dvCSV = document.getElementById("dvCSV");
                        dvCSV.innerHTML = "";
                        dvCSV.appendChild(table);
                    }
                    reader.readAsText(fileUpload.files[0]);
                } else {
                    alert("This browser does not support HTML5.");
                }
            } else {
                alert("Please upload a valid CSV file.");
            }
        }
    </script>
    <input type="file" id="fileUpload" />
    <input type="button" id="upload" value="Upload" onclick="Upload()" />
    <input type="button" id="Calculate Commission" value="Calculate Commission" oneclick=""/>
    <hr />
    <div id="dvCSV">
    </div>
</body>
</html>

制作一个按钮，将在我的表格中添加一列，其中包含计算销售佣金数字。

标签： javascripthtml

解决方案

感谢您提前知道这是一个学校项目。我们都去过那里，所以让我带您了解一下。

您需要让您拥有的按钮调用您已经拥有的功能。修正您的错字，然后为该onclick属性分配一个新功能：

<input type="button" id="Calculate Commission" value="Calculate Commission" onclick="calculateCommissions()" />

然后您需要创建该函数...最终，总体思路是，我们是否希望该函数查看每一行（因此，我们可能需要一个循环来遍历表中的行）...拉出该行的“销售额”和“佣金百分比”并将它们相乘......然后，在我们让循环移动到下一行之前，将最终佣金分数添加到当前行的末尾。

function calculateCommissions() {
    // Get an array full of the rows
    // Note the use of the spread operator, we need to convert the NodeList type to an Array type
    var allRows = [...document.getElementsByTagName('tr')];

    // Now let's loop over that array and look at each row individually
    allRows.forEach( eachRow => {

        // For the current row, we need to pull out the "sales" and "commission %" values
        var sales = Number(eachRow.childNodes[1].innerText.slice(1));
        var percentCommission = Number(eachRow.childNodes[2].innerText.substr(0, eachRow.childNodes[2].innerText.indexOf('%')));

        // Do the math...
        var commission = Math.round(sales * percentCommission / 100)

        // And now, we want to add that commission as an additional column
        // Note that since we're also going to be looping over the header...
        // ... let's add a column header "Commission"
        var tableCellToAppend = document.createElement('td')
        tableCellToAppend.innerText = commission ? `$${commission}` : 'Commission';
        eachRow.appendChild(tableCellToAppend)

    })
}

当然，在现实世界的项目中，您需要进行大量的错误处理。真实用户从不上传完美的 csv 文件。欢迎来到 SO。

推荐阅读