Question

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

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>

单击一个按钮，将在表中添加计算销售佣金编号的列。

Answer 1

感谢您提前将它用于学校项目。我们都去过那里，所以让我向您介绍一下。

您需要拥有一个已经调用过的按钮。修正输入错误，然后将新功能分配给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。

我可以做一个按钮，将添加列到我的表中并计算出销售佣金吗？

1 个答案: