Responsive Data Table Form With Increment Option Using Html

Question

I'm looking for data table with increment option (Flask project).

This table is for admin managmenet - Create order with selected product and save it.

(Once click on save only the selected product will be transfer to orders page)

I need to do it more efficient because I have like 100 products.

There is 2 main problems:

The increment only affect the first input
I don't want copy-paste the td,buttun and input per product..

Ataached my code:



  
    
  

  


  


  
    
      Product
      Price
      Quantity
    
    
      Product A
      20$
      
      
      
    
    
      Product B
      20$

user_18062082 · Answer

I would prrefer to use React for this purposes, but if you want to use vanillaJS I would do something like this:

const increment = (element) => {
  element.closest('tr').getElementsByTagName('input')[0].stepUp();
  
} 

const decrement = (element) => {
  element.closest('tr').getElementsByTagName('input')[0].stepDown(); // gets input of the tr from where's the call
}


// in your case that's the items from the database sended via flask to JS.
const test_products = {} // stores items in { item: price } order.


const create_test_products = () => {  // inserts hundred items to the test_products object
  
  for (var item=1; item<101; item++){
    
    var price = item + 2 // just an example to make different prices
    
    test_products[item] = price;

  }`enter code here`

}


const create_markup = () => { // will create a tablerow foreach item in the object
  
    const table = document.getElementById('main_table'); 
     for (var item in test_products){
   var tableRow = `
      ${item}
      ${test_products[item]}$
      
      
      
    `
    table.insertAdjacentHTML('beforeend', tableRow);
    }


}

window.onload = create_test_products();
window.onload = create_markup();



  
    
  

  


  


  
    
      Product
      Price
      Quantity

Responsive Data Table Form With Increment Option Using Html

1 Answers