I want to add items from js generated product table to cart table but I don't how to tell the system what table row am selecting

Question

I'm still trying to find a way to get the addToCart() function to work.

fetch('server.php')
  .then((res) => res.json())
  .then((response) => {
    let output = '';
    for (let i in response) {
      output += `
            ${response[i].quantity}
            
            ₦${response[i].price}.00
            
            
        `;
    }
    document.querySelector('.tbody').innerHTML = output;
  })
  .catch((error) => console.log(error));


function addToCart() {
  document.getElementById('fillUp').innerHTML += '123';
  console.log(val);
}



  
    Quantity
    Products
    Price
  
  




  Checkout Cart
  
    
      
      
        
          Total:
          
        
      
    
  


 


   

 var tbody = document.getElementById('tbody'),rIndex;
var tb = tbody.rows.length;
for(var i = 0; i < tb; i++) {
    tbody.rows[i].onclick = function() {
        console.log(this.cells[0].innerHTML);
    }

user_2813224 · Answer

Dropping a row into another table was accomplished mainly by cloneNode() and the original row was removed by .remove(). In the OP code:

  var tbody = document.getElementById('tbody'),rIndex;

This makes very little sense. There is no tag with an id of #tbody there's a tag with a class of .tbody which at the very least can be accessed by .querySelector() that's why it's null.

The problem will run into as I see it is that you are using an inline event handler:

   onclick="addToCart()"

Inline event handlers are garbage. Use on event properties and/or event listeners, read the following after reviewing the example below:

Events

Event Delegation

HTMLFormElement

const allTables = document.querySelectorAll('table');
const shop = allTables[0].tBodies[0];
const cart = allTables[1].tBodies[0];

fetch('https://my.api.mockaroo.com/i_mart.json?key=3634fcf0')
  .then((res) => res.json())
  .then((response) => {
    let output = '';
    for (let i in response) {
      output += `
            
            ₦${response[i].price.substring(1)}
            
            
            
            
            
            
            
        `;
    }
    shop.innerHTML = output;
  })
  .catch((error) => console.log(error));

const itemTo = (row, dest) => {
  const copy = row.cloneNode(true);
  row.remove();
  dest.appendChild(copy);
  const btns = copy.querySelectorAll('.btn');
  const fields = copy.querySelectorAll('input');
  if (dest === cart) {
    btns[0].disabled = false;
  } else {
    btns.forEach(btn => btn.disabled = true);
    fields[0].value = fields[1].value;
    fields[2].value = '0';
    fields[3].value = '₦0.00';
  }
};

const addToSubFrom = (row, dir) => {
  let D = dir === undefined ? 1 : dir;
  const cells = row.children;
  let add = row.querySelector('.add');
  let sub = row.querySelector('.sub');
  let prc = cells[1].textContent.substring(1);
  let qty = cells[2].firstElementChild;
  let cnt = cells[3].firstElementChild;
  let subT = cells[4].firstElementChild;

  let c = +cnt.value + D;
  if (c === 0) {
    sub.disabled = true;
  } else {
    sub.disabled = false;
  }
  let q = +qty.value - D;
  if (q === 0) {
    add.disabled = true;
  } else {
    add.disabled = false;
  }
  let p = +prc;
  let sT = ((p * 100) * c) / 100;

  cnt.value = c;
  qty.value = q;
  subT.value = '₦' + sT.toFixed(2);
};

const getTotal = array => array.map(inp => +inp.value.substring(1) * 100).reduce((sum, cur) => sum + cur);

const addToCart = e => {
  const io = e.currentTarget.elements;
  const btn = e.target;

  if (btn.matches('button')) {
    let row = document.querySelector('#' + btn.closest('tr').id);
    let S;
    switch (btn.name) {
      case 'itm':
        let dest = btn.closest('tbody').className === 'shop' ? cart : shop;
        itemTo(row, dest);
        S = [...io.subT];
        io.total.value = (getTotal(S) / 100).toFixed(2);
        break;
      case 'add':
        S = [...io.subT];
        addToSubFrom(row);
        io.total.value = (getTotal(S) / 100).toFixed(2);
        break;
      case 'sub':
        S = [...io.subT];
        addToSubFrom(row, -1);
        io.total.value = (getTotal(S) / 100).toFixed(2);
        break;
      default:
        break;
    }
  }
  e.stopPropagation();
};

const UI = document.forms[0];
UI.onclick = addToCart;

:root {
  font: 1ch/1.5 'Segoe UI'
}

body {
  font-size: 3ch;
}

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}

caption {
  font-size: 2rem;
  font-weight: 900
}

.h1 {
  width: 35%;
}

.h3 {
  width: 20%;
}

.h3 {
  width: 10%;
}

.h4 {
  width: 20%;
  text-align: left;
}

.h5 {
  width: 15%;
}

td:nth-of-type(n+2) {
  text-align: center;
}

tfoot th {
  text-align: right;
}

input,
output {
  display: inline-block;
  font-size: 100%;
  line-height: 1.15;
}

input,
output,
td:nth-of-type(2) {
  font-family: Consolas
}

button {
  font-size: 1.25rem;
  cursor: pointer;
}

output {
  font-weight: 900;
}

.qty,
.cnt,
.subT {
  width: 2ch;
  border: 0;
}

.subT {
  width: 6ch
}



  
    
      iMart™ Online Wholesale
    
    
      Item
      Price
      Qty
      Count
      SubTotal
    
    
  

  

  
    Checkout Cart
    
      Item
      Price
      Qty
      Count
      SubTotal
    
    
    
      
        Total: ₦

I want to add items from js generated product table to cart table but I don't how to tell the system what table row am selecting

1 Answers