My table is Here:

<div id="MyItems">
  <table>
    <thead>
      <tr>Quantity</tr>
      <tr>Items</tr>
      <tr>Cost</tr>
      <tr>Totals</tr>
    </thead>
    <tbody id="AllItems">
      <tr >
        <td  id="amount1"><input type="number" value="0" min="0" name="quantity" placeholder="Qty." ></td>
        <td >Test Item 1</td>
        <td >$<span >1349</span></td>
        <td >$<span >0.00</span></td>
      </tr>
      <tr >
        <td  id="amount1"><input type="number" value="0" min="0" name="quantity" placeholder="Qty." ></td>
        <td >Test Item 2</td>
        <td >$<span >854</span></td>
        <td >$<span >0.00</span></td>
      </tr>
    </tbody>

  </table>
</div>

This is my js code which is triggered after button click. I am retrieving the values of all inputs in an array but stuck how to move forward.

jQuery('#form_event').click(function (e) {
    e.preventDefault();
      jQuery('.loader').css('display', 'block');
      var id = jQuery('#getitemid').val();
      var totalAmount = jQuery('#TotalAmount').text();
      var ItemArray = [];

      $('#getprices tbody tr').each(function () {
        $(".quantity").each(function() {
          if( $(this).val() !== 0) {
            ItemArray[$(this).attr("quantity")] = $(this).val();
          }
        });

        $(".price").each(function() {
          ItemArray[$(this).attr("price")] = $(this).val();
        });

      });
});

The image of table is given below. Now What I want is to get value of all inputs in an array when I click to submit button. Only the quantity more than 0 should be added.

Thanks in advance.

CodePudding user response：

Be careful of each individual quantity.

function totalAmount() {
  const quantities = document.getElementsByName('quantity');
  let totalAmount = 0;
  for (let i = 0; i < quantities.length; i  ) {
    if (quantities[i].value > 0) {
      for (let j = 0; j < parseInt(quantities[i].value); j  ) {
        totalAmount  = parseInt(quantities[i].parentElement.nextElementSibling.nextElementSibling.children[0].innerHTML);
      }
    }
  }
  console.log(totalAmount);
}

CodePudding user response：

Use jQuery map

$("#yourSubmitButton").click(function (){
    let quantity = $('.quantity').map((_,el) => el.value > 0 ? el.value : null).get();
    console.log(quantity)
})

<div id="MyItems">
  <table>
    <thead>
      <tr>Quantity</tr>
      <tr>Items</tr>
      <tr>Cost</tr>
      <tr>Totals</tr>
    </thead>
    <tbody id="AllItems">
      <tr >
        <td  id="amount1"><input type="number" value="0" min="0" name="quantity" placeholder="Qty." ></td>
        <td >Test Item 1</td>
        <td >$<span >1349</span></td>
        <td >$<span >0.00</span></td>
      </tr>
      <tr >
        <td  id="amount1"><input type="number" value="0" min="0" name="quantity" placeholder="Qty." ></td>
        <td >Test Item 2</td>
        <td >$<span >854</span></td>
        <td >$<span >0.00</span></td>
      </tr>
    </tbody>
    <button id="yourSubmitButton">Button</button> 

  </table>
</div>

CodePudding user response：

first give id to your table.

 <div id="MyItems">    
<table id="table">
        <thead>
          <tr>Quantity</tr>
          <tr>Items</tr>
          <tr>Cost</tr>
          <tr>Totals</tr>
        </thead>
        <tbody id="AllItems">
          <tr >
            <td  id="amount1"><input type="number" value="0" min="0" name="quantity" placeholder="Qty." ></td>
            <td >Test Item 1</td>
            <td >$<span >1349</span></td>
            <td >$<span >0.00</span></td>
          </tr>
          <tr >
            <td  id="amount1"><input type="number" value="0" min="0" name="quantity" placeholder="Qty." ></td>
            <td >Test Item 2</td>
            <td >$<span >854</span></td>
            <td >$<span >0.00</span></td>
          </tr>
        </tbody>
    
      </table> </div>

here's button function

$("#Button").click(function (){  
      var myTable= document.getElementById('table');  
       
      var dataArr = []
       
      $("#myTable tbody tr").each(function (a, b) {
        let qty= $(this).find('td').eq(0).find('input').val()
        let item = $(this).find("td:nth-child(2)").text();
        let cost = $(this).find("td:nth-child(3)").text();
        let total = $(this).find("td:nth-child(4)").text();
        if (qty !=0){
          dataArr.push({qty: qty, item:item, cost:cost, total:total})  
        } 
        console.log(dataArr)

      }

})