如何在數量不為空的情況下單擊提交時在JqueryArray中獲取輸入值

我的桌子在這里：

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

  </table>
</div>

這是我的 js 代碼，在單擊按鈕后觸發。我正在檢索陣列中所有輸入的值，但卡住了如何前進。

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();
        });

      });
});

表格的影像如下所示。現在我想要的是當我單擊提交按鈕時獲取陣列中所有輸入的值。只應添加大于 0 的數量。

提前致謝。

uj5u.com熱心網友回復：

注意每個單獨的數量。

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);
}

uj5u.com熱心網友回復：

使用 jQuery地圖

$("#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 class="trbody">
        <td class="qty amount" id="amount1"><input type="number" value="0" min="0" name="quantity" placeholder="Qty." class="quantity"></td>
        <td class="items">Test Item 1</td>
        <td class="price">$<span class="price-given">1349</span></td>
        <td class="total">$<span class="amount">0.00</span></td>
      </tr>
      <tr class="trbody">
        <td class="qty amount" id="amount1"><input type="number" value="0" min="0" name="quantity" placeholder="Qty." class="quantity"></td>
        <td class="items">Test Item 2</td>
        <td class="price">$<span class="price-given">854</span></td>
        <td class="total">$<span class="amount">0.00</span></td>
      </tr>
    </tbody>
    <button id="yourSubmitButton">Button</button> 

  </table>
</div>

uj5u.com熱心網友回復：

首先給你的桌子id。

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

這是按鈕功能

$("#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)

      }

})

標籤：

上一篇：未捕獲的錯誤：PNG檔案不完整或損壞

下一篇：React錯誤：渲染的鉤子比上一次渲染時更多。使用useState和map時