Привет всем.
Есть таблица товара с несколькими значениями. Цена берётся из ячейки с class="price"
Помимо этого есть ячейки с display:none и классами price_50, price_100, price_500, price_1000, price_2500
Необходимо реализовать так что бы при вводе в input количество >=50 цена бралась из ячейки с class="price_50",
при вводе >=100 из ячейки с class="price_100",
при вводе >=500 из ячейки с class="price_500",
при вводе >=1000 из ячейки с class="price_1000",
при вводе >=2500 из ячейки с class="price_2500"
т.е. что бы цена менялась динамически в зависимости от введённого значения в ячейке "количество".
Так же те строки в которых значение ячейки "количесво" отлично от нуля необходимо вывести в <p class="output-all"></p>
т.е вывести все ячейки данной строки в одну строку.
Всем заранее спасибо.
Пример таблицы
https://jsfiddle.net/v8wh4sLh/
-
1Не понял про output-all. Можете подробней объяснить?– dmitryshishkin12 мая 2017 в 16:30
-
есть <p class="output-all"></p> в него надо вывести все строки со значением в input более 0, например так Товар > ЧАБ > АБС. Цвет: черный. > количество 5 > цена 99 > сумма 495– Dumb12 мая 2017 в 16:32
-
1Можете показать пример кода того, что должно упасть в output-all?– dmitryshishkin12 мая 2017 в 16:35
-
1И еще такой вопрос. Когда у нас количество от 50 до 100, то мы прячем ячейку с price и отображаем price_100?– dmitryshishkin12 мая 2017 в 16:36
-
1Так, понял. Сейчас напишу решение.– dmitryshishkin12 мая 2017 в 16:42
|
Показать ещё 1 комментарий
1 ответ
Я позволил себе переделать некоторые вещи в структуре HTML и додумал некоторые вещи в JS, которые были не описаны.
Так будет меньше нагрузка на DOM и проще работать со значениями. Ну и расширять всё это дело тоже. В принципе, можно было разбить на более мелкие функции, но я не стал.
var calculator = {
parent: document.getElementById('table-price-box'),
totalPrice: 0,
position: [],
isText: false,
init: function() {
var self = this;
this.parent.addEventListener('input', function(e) {
var field = e.target,
tr = field.parentElement.parentElement;
// Пересчитываем стоимость в этом поле
self.changeInput(field, tr);
// Пересчитываем всё
self.recount();
});
},
// Пересчет одного поля
changeInput: function(field, tr) {
var price = tr.querySelector('.price'),
num = parseInt(field.value);
// Если ввели не число, то ничего не меням
if(!isNaN(num)) {
var count = this.getCount(price, num),
result;
// Считаем итоговую цену
result = count * num;
// Если у нас в качестве цены за единицу текстовое значение, то не будем ничго выводить
if(isNaN(result)) {
tr.querySelector('.sum').textContent = '';
}
// В противном случае вывведем цену
else {
// Но сначала округляем число
result = Math.round(result);
// Выводим
tr.querySelector('.sum').textContent = result;
}
// Меняем отображаемую стоимость за единицу
price.textContent = count;
}
},
// Получаем стоимость единицы товара в зависимости от позиции
getCount: function(price, num) {
var count;
if(num < 50) count = price.dataset.price0;
if(num >= 50 && num < 100) count = price.dataset.price50;
if(num >= 100 && num < 500) count = price.dataset.price100;
if(num >= 500 && num < 1000) count = price.dataset.price500;
if(num >= 1000 && num < 2500) count = price.dataset.price1000;
if(num >= 2500) count = price.dataset.price2500;
return count;
},
// Пересчитываем весь калькулятор
recount: function() {
var self = this,
tr = this.parent.querySelectorAll('tr');
// Обнуляем общую сумму, позиции и текстовые суммы
self.totalPrice = 0;
self.positions = [];
self.isText = false;
tr.forEach(function(item) {
var field = item.querySelector('input');
// Проверяем есть ли в строке инпут
if(field) {
var num = field.value;
// Дополниельно проверяем количество на "не число"
if(!isNaN(num) && num > 0) {
var price = item.querySelector('.price').textContent;
// Проверяем есть ли у нас стоимость за единицу в значении
if(isNaN(+price)) {
self.isText = true;
} else {
// Увеличиваем общую стоимость
self.totalPrice += parseFloat(item.querySelector('.sum').textContent);
}
// Добавляем позиции
self.positions.push({
classificator: item.querySelector('.calc-classificator').textContent,
properties: item.querySelector('.calc-properties').textContent,
price: price,
num: num,
sum: item.querySelector('.sum').textContent
});
}
}
});
self.setNewResult();
},
// Устанавливаем новые результаты
setNewResult: function() {
var self = this,
sum = self.totalPrice;
// Если у нас есть текстовое значение, то добавляем плюсик
if(self.isText) sum += '+';
self.parent.querySelector('#total').textContent = sum;
// Выводим добавленные позиции
var str = '';
self.positions.forEach(function(pos) {
str += '<div style="margin-bottom: 5px">';
str += 'Классификатор:' + pos.classificator + ' ';
str += 'Свойства:' + pos.properties + ' ';
str += 'Цена:' + pos.price + ' ';
str += 'Кол-во:' + pos.num + ' ';
str += 'Сумма:' + pos.sum + ' ';
str += '</div>';
});
self.parent.querySelector('.output-all').innerHTML = str;
}
};
calculator.init();
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<table id="table-price-box" class="table table-hover table-bordered table-condensed">
<thead>
<tr>
<td colspan="6">
<div class="col-md-6">
<p style="font-size:20px;margin:5px 0;">Общая сумма заказа <span id="total">0</span> руб</p>
</div>
<div class="col-md-6">
<p class="output-all"></p>
</div>
</td>
</tr>
<tr>
<td align="center" width="30%">
<p align="center">Наименование</p>
</td>
<td align="center" width="10%">
<p align="center">Классификатор материала</p>
</td>
<td align="center" width="30%">
<p align="center">Основные свойства материала</p>
</td>
<td align="center" width="10%">
<p align="center">Количество</p>
</td>
<td align="center" width="10%">
<p align="center">Цена, руб</p>
</td>
<td align="center" width="10%">
<p align="center">Итого, руб</p>
</td>
</tr>
</thead>
<tbody>
<tr class="td-box">
<td align="center" rowspan="5" valign="middle"><a href="#">Товар</a><br/>
<p>Габаритные размеры<br/>65x36x14 мм</p>
<p align="center"><img src="https://dummyimage.com/250x250/99cccc.gif" class="price-img"/></p>
</td>
<td align="center" class="calc-classificator">ЧАБ</td>
<td align="center" class="calc-properties">АБС. Цвет: черный.</td>
<td align="center">
<input min="0" type="number" style="border-radius:5px;width:80%;"/>
</td>
<td align="center" data-price0="99" data-price50="84" data-price100="74.6" data-price500="67.2" data-price1000="61.6" data-price2500="догов." class="price">99</td>
<td align="center" class="sum"></td>
</tr>
<tr class="td-box">
<td align="center" class="calc-classificator">
ССА
ТСА
</td>
<td align="center" class="calc-properties">АБС. Цвет: светло-серый; темно-серый.</td>
<td align="center">
<input min="0" type="number" style="border-radius:5px;width:80%;"/>
</td>
<td align="center" data-price0="106" data-price50="89.2" data-price100="79.4" data-price500="71.4" data-price1000="65.4" data-price2500="догов." class="price">106</td>
<td align="center" class="sum"></td>
</tr>
<tr class="td-box">
<td align="center" class="calc-classificator">ЧАББ</td>
<td align="center" class="calc-properties">АБС с повышенным блеском. Цвет: черный.</td>
<td align="center">
<input min="0" type="number" style="border-radius:5px;width:80%;"/>
</td>
<td align="center" data-price0="102" data-price50="86.6" data-price100="77" data-price500="69.2" data-price1000="63.4" data-price2500="догов." class="price">102</td>
<td align="center" class="sum"></td>
</tr>
<tr class="td-box">
<td align="center" class="calc-classificator">
ССАБ
ТСАБ
</td>
<td align="center" class="calc-properties">АБС с повышенным блеском. Цвет: светло-серый; темно-серый.</td>
<td align="center">
<input min="0" type="number" style="border-radius:5px;width:80%;"/>
</td>
<td align="center" data-price0="104" data-price50="87.8" data-price100="78" data-price500="70.2" data-price1000="64.4" data-price2500="догов." class="price">104</td>
<td align="center" class="sum"></td>
</tr>
<tr class="td-box">
<td align="center" class="calc-classificator">Латунь</td>
<td align="center" class="calc-properties">Покрытие - никель</td>
<td align="center">
<input min="0" type="number" style="border-radius:5px;width:80%;"/>
</td>
<td align="center" data-price0="54" data-price50="45.2" data-price100="40.2" data-price500="36.2" data-price1000="33.2" data-price2500="догов." class="price">54</td>
<td align="center" class="sum"></td>
</tr>
</tbody>
</table>
-
Тут написано избегать комментариев в духе "спасибо", но я вас всё равно благодарю, сейчас я во хмелю и не могу протестировать ваше решение. Как доберусь до компьютера обязательно проверю и отпишусь. Ещё раз спасибо!– Dumb12 мая 2017 в 19:22
-
Да, всё отлично работает, только у меня ещё пара вопросов. Как сделать что бы в output-all так же добавлялся текст ссылки(товар) из первого столбца? Можно ли сделать что бы output-all выводился не в таблице, а в произвольном месте на странице(привязаться не к class, а к id)– Dumb14 мая 2017 в 14:28