let total = 0;
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelectorAll("td:nth-child(2)").forEach((cell, index) => {
const cellInnerHTML = cell.innerHTML
const numericTotal = cellInnerHTML.substring(1, cellInnerHTML.length);
total += parseInt(numericTotal) * 1000;
cell.parentElement.querySelectorAll("td")[2].innerHTML = total;
});
});
Codepen:
https://codepen.io/anon/pen/vzQyGy
- Вам необходимо позаботиться об удалении знака
$. - после parseInt, из-за формата ваших чисел у вас останутся (согласно вашему примеру) 2, 8 и 5 вместо 2000, 8000, 5000. Я наивно обращаюсь с этим умножением на 1000.Лучшее решение должно быть найдено, это всего лишь эскиз.
- Вам нужно отформатировать числа обратно к тому, что вы хотите.
Решение есть, я оставляю детали для вас:)
В случае вашего кода это должно выглядеть так:
this.attendantNames.forEach((attendant, index) => {
const table = document.querySelector('.table');
const attendantRow = table.querySelectorAll('tr')[index];
const runningTotalCell = attendantRow.querySelectorAll('td')[2];
//am assuming that this.totals is 0 at the beginning of this loop, right?
this.totals += parseInt(attendant.total); //am not sure of format attendant.total have in your data, not sure if you need parsing here and if it will work
runningTotalCell.innerHTML = `$${this.totals.toFixed(2)}`;
})
Это должен работать, но не в состоянии запустить код, посмотреть, действительно ли он работает или выдает ошибки, отладить его и т. д. Я не могу дать вам 100%.В случае какой-либо ошибки, пожалуйста, попробуйте решить ее самостоятельно :) Если вы застряли, вернитесь и спросите, что не так и где, я постараюсь помочь снова:)
Общие комментарии
- ваш метод называется
getAttendants, и он делает WAAAAY больше, чем это (получение обслуживающего персонала).Он выбирает данные обслуживающего персонала, создает части таблицы и заполняет эту таблицу данными.Не должно.Метод должен выполнять только одно (принцип единой ответственности) и иметь правильное имя. - Вы должны разделить обязанности между несколькими функциями и передавать данные между ними, позволяя каждой функции обрабатывать только одну задачу
** 1033 Ex.- функция A - извлекает данные обслуживающего персонала - функция B - создает таблицу - функция C - заполняет эту таблицу данными обслуживающего персонала
Внутри этих функций вы можете разбить свой код на более мелкие функции.Там, где вы размещаете комментарии, вы можете использовать функции, которые будут комментировать код внутри и просто по имени, они объяснят разработчику, что они делают.Ex.
Три строки ниже используются в каждом цикле, только для получения доступа к этому runnintTotalCell.
const table = document.querySelector('.table');
const attendantRow = table.querySelectorAll('tr')[index];
const runningTotalCell = attendantRow.querySelectorAll('td')[2];
Вы можете извлечь их и обернуть с помощью отдельной функции:
getRunningTotalCellForRow(rowIndex) {
const table = document.querySelector('.table');
const attendantRow = table.querySelectorAll('tr')[index];
return attendantRow.querySelectorAll('td')[2];
}
И использовать в цикле forEach.
И т. Д.
Обычно дляЧтобы узнать, как правильно кодировать, вы можете взять некоторые учебники, прочитать несколько книг и ознакомиться с правилами:)
Что касается книг - «Чистый код» Роберта С. Мартина - один из канонических.Что касается учебников и других онлайн-ресурсов.
Поиск в браузере выбранных вами текстов, таких как: - как писать чистый код - принцип единой ответственности - DRY KISS SOLID - основные принципы разработки программного обеспечения
Я думаю, что с сайтов, которые вы найдете, вы можетенайти гораздо больше и войти в это.
Удачи и веселья!
После того, как вы отредактировали свой код:
Я проверил ваш скриншот.Красная часть говорит мне, что в первой строке вы вставляете TOTAL FOR ALL (около 32k) во вторую ячейку, это значение, но удваивается, в третьем значении умножается на три.Это приводит к выводу, что вы, должно быть, запутываете некоторые дополнения в своем цикле.
Итак
var total = 0;
document.querySelectorAll("td:nth-child(4)").forEach((cell, index) => {
this.attendantNames.forEach(a=>{
this.total += a.total;
});
cell.innerText = this.total;
});
То, что вы делаете выше:
вы определили var total = 0 (и никогда не используете его)
для каждой 4-й ячейки
принять всех участников и для каждого участника
добавить значение total кthis.total
и вставьте его во innerText
Вы видите сейчас?Для каждой ячейки вы вставляете итоговые итоги для всех операторов (плюс значение this.totals, которое у вас уже есть, поскольку вы никогда не обнуляете его).
Правильная версия ниже:
const runningTotalCells = document.querySelectorAll("td:nth-child(4)");
//no need for nested loops
this.attendantNames.forEach((attendant, index) => {
this.total += a.total;
runningTotalCells[index].innerText = this.total;
})
Работает ли сейчас?