#javascript #html
#javascript #HTML
Вопрос:
Я работаю над школьным проектом, и мне нужно создать программу, которая будет рассчитывать комиссию сотрудников наших компаний. Пока у меня есть место, куда я могу загрузить файл данных и поместить его в таблицу. Я хочу добавить кнопку, которая рассчитает комиссию с продаж для каждого сотрудника и добавит новый столбец в таблицу с рассчитанной комиссией с продаж.
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-9s_\.-:]) (.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>
Создайте кнопку, которая добавит столбец в мою таблицу с рассчитанными номерами комиссии за продажу.
Комментарии:
1. Или, если вы не можете добавить в csv, можно ли создать новую таблицу с именем сотрудников и их рассчитанной комиссией с продаж?
Ответ №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.