1 Востаннє редагувалося noname122 (14.12.2021 19:27:00)

Тема: Таблиця JS

Є ось такий код ,так звана кошик товарів,я нижче постанніх 2 стовпців вивести  загальну суму всіх товарів ,я розумію що потрібно зробити цикл ,але не розумію як реалізувати

var d = document,
    itemBox = d.querySelectorAll('.product-grid'),
    cartCont = d.getElementById('cart_content'); 

  function addEvent(elem, type, handler){
  if(elem.addEventListener){
    elem.addEventListener(type, handler, false);
  } else {
    elem.attachEvent('on'+type, function(){ handler.call( elem ); });
  }
  return false;
  }
 
  function getCartData(){
  return JSON.parse(localStorage.getItem('cart'));
  }

  function setCartData(o){
  localStorage.setItem('cart', JSON.stringify(o));
  return false;
  }

  function addToCart(e){
  this.disabled = true; 
  var cartData = getCartData() || {}, 
      parentBox = this.parentNode, 
      itemId = this.getAttribute('data-id'), 
      itemTitle = parentBox.querySelector('.title').innerHTML, 
      itemPrice = parentBox.querySelector('.price').innerHTML; 
  if(cartData.hasOwnProperty(itemId)){
    cartData[itemId][2] += 1;
    alert("Товар добавлено!");
  } else { 
    cartData[itemId] = [itemTitle, itemPrice, 1];
    alert("Товар добавлено!");
  }
  if(!setCartData(cartData)){ 
    this.disabled = false; 
  }
  return false;
  }

  for(var i = 0; i < itemBox.length; i++){
  addEvent(itemBox[i].querySelector('.add_item'), 'click', addToCart);
  }
  
  
  function openCart(e){
  var cartData = getCartData(), 
      totalItems = '';
 
  if(cartData !== null){
    totalItems = '<table class="shopping_list"><tr><th>Назва</th><th>ціна</th><th>К-сть</th></tr>';
    for(var items in cartData){
      totalItems += '<tr>';
      for(var i = 0; i < cartData[items].length; i++){
        totalItems += '<td>' + cartData[items][i] + '</td>';
      }
      totalItems += '</tr>';
    }
    totalItems += '</table>';
    cartCont.innerHTML = totalItems;
  } else {
  
    cartCont.innerHTML = 'В кошику нічого немає!';
  }
  return false;
  }
  /
  addEvent(d.getElementById('checkout'), 'click', openCart);
 
  addEvent(d.getElementById('clear_cart'), 'click', function(e){
  localStorage.removeItem('cart');
  cartCont.innerHTML = 'кошик  очищено.';
  });

2

Re: Таблиця JS

дайте ще html код, шоб мона було перевірити. І не корзина, а кошик, і шо це за

В корзине нічого немає!

*WALL*  *WALL*  *WALL*  *WALL*  *WALL*  *FACEPALM*  *FACEPALM*  *FACEPALM*  *FACEPALM*  *FACEPALM*  *FACEPALM*  *FACEPALM*
ганьба та сором

3

Re: Таблиця JS

<div class="container">
        <div class="row">
            <div class="col-md-3 col-sm-6">
                <div class="product-grid">
                    <div class="product-image">
                        <a href="#">
                            <img class="pic-1" src="">
                            <img class="pic-2" src="">
                        </a>
                        
                        <ul class="social">
                            <li><a href="" data-tip="кошик"><i class="fas fa-shopping-cart"></i></a></li>
                        </ul>
                    </div>
                    <div class="product-content">
                        <h3 class="title"><a href="#">2</a></h3>
                        <div class="price">90грн</div>
                        <button class="add_item" data-id="17">до кошику</button>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="product-grid">
                    <div class="product-image">
                        <a href="#">
                            <img class="pic-1" src="">
                            <img class="pic-2" src="">
                        </a>
                       
                        
                        <ul class="social">
                            <li><a href="1.html" data-tip="кошик"><i class="fas fa-shopping-cart"></i></a></li>
                        </ul>
                    </div>
                    <div class="product-content">
                        <h3 class="title"><a href="#">1</a></h3>
                        <div class="price">1050 грн.</div>
                        <button class="add_item" data-id="16">до кошику</button>
                    </div>
                </div>
            </div>
            
                
    </div>

4

Re: Таблиця JS

а стилі?

5 Востаннє редагувалося noname122 (14.12.2021 19:49:55)

Re: Таблиця JS

там їх дуже багато але ось для таблиці,

* {margin: 0; padding: 0;}

  #cart_content {  width:auto;
    height: auto;
    
    margin-top: 10px;
    padding: 5px;
    border: 1px solid #060;
    margin-left: 50px;
  }
 
  .item_box {
    border: 1px solid #999;
    margin-bottom: 10px;
  }
  .shopping_list {
      width: 890px;
    margin-top: 10px;
      border-collapse: collapse;
  }
  .shopping_list td,
  .shopping_list th {
      padding: 10px;
      border: 1px solid #AAAAAA;
  }

Сам js знаходиться на окремій сторінці

6

Re: Таблиця JS

то це так і має буть, шо ціни вже зашиті в html? вам тре витягнути ті ціни з html, а потім додати суму цін в  html?

7

Re: Таблиця JS

Натискаю на кнопку до кошику ,потім якщо натискаю на кнопку до кошику переходжу на окрему сторінку,и там є клавіша оформити і відкриваються ті товари на які натиснули їх ціна і кількість,а мені потрібно нижче вивести загальну суму на скільки купили товарів

    <div id="cart_content"></div><p><button id="checkout">Оформити</button> &nbsp; <button id="clear_cart">Очистити </button></p>
       
       
    <script type="text/javascript" src=""></script>
   
    
    </main>

8

Re: Таблиця JS

ну оце ви натискаєте на "Оформити", і викликається функція `openCart` з вашого js коду, так?
вона будує табличку
https://i.imgur.com/LDe1YI2.png
і вам тре під табличкою вивести суму всіх продуктів?

воно має бути просто під табличкою, чи всередині таблички, окремим рядком?

9 Востаннє редагувалося noname122 (14.12.2021 20:15:29)

Re: Таблиця JS

ну ось наприклад товар 1 ,його ціна 1050,а кількість 2,і потрібно 1050*2+90*3(це 2 товар)=2370,ось цей результат потрібно вивести під колонкою к-сть,як продовження таблиці

10 Востаннє редагувалося noname122 (14.12.2021 20:15:57)

Re: Таблиця JS

ось так

11

Re: Таблиця JS

замініть свою функцію openCart цією

function openCart(e) {
    var cartData = getCartData(),
        totalItems = '';

    if (cartData !== null) {
        totalItems = '<table class="shopping_list"><tr><th>Назва</th><th>ціна</th><th>К-сть</th></tr>';
        let total = 0;
        for (var items in cartData) {
            totalItems += '<tr>';
            for (var i = 0; i < cartData[items].length; i++) {
                totalItems += '<td>' + cartData[items][i] + '</td>';
            }
            total+= parseInt(cartData[items][1]) * cartData[items][2];
            totalItems += '</tr>';
        }
        totalItems+=`<tr><td></td><td>${total} гривнів, курва мать!</td></tr>`;
        totalItems += '</table>';
        cartCont.innerHTML = totalItems;
    } else {

        cartCont.innerHTML = 'В кошику нічого немає!';
    }
    return false;
}

і додайте в стилі

 table tr:last-child td:nth-child(2) {
    border: 2px solid black;
  }

шоб воно жирним виділило то
https://i.imgur.com/9wvG6k7.png

12

Re: Таблиця JS

не під ціною,а під к-сть

13

Re: Таблиця JS

то самі собі змініть то, як вам треба, чи може мені ще за вас в унівєра піти і здати цю задачку??

14

Re: Таблиця JS

А як зробити що не було таблиці під  колонкою Назва,а була тільки під к-сть

15

Re: Таблиця JS

https://developer.mozilla.org/uk/docs/W … mpty-cells

empty-cells: hide;

для тих td, котрі тре приховати

16

Re: Таблиця JS

шось не вдається прибрати ніяк

17

Re: Таблиця JS

а шо саме ви пробували зробить?

18

Re: Таблиця JS

задати стиль для td

19

Re: Таблиця JS

і як ви це намагались зробити?

20

Re: Таблиця JS

Вирішив просто спробувати і зробив ось так

 table td{
  empty-cells: hide;
  }