我如何在javascript中訪問表中的動態行值

Question

我的目標是獲取用戶在發票中填寫的多行數據（product_id 及其 product_qnty），因此我可以使用 php 從現有產品數量中扣除這些數量。 在這里，我試圖獲取每個單元格數據並將其存儲為 json 格式以將其傳遞到控制器（Laravel）php 中。

這是代碼；

Javascript :

function InvoiceDataProcess()
{

    //gets table
    var oTable = document.getElementById('rowData');

    //gets rows of table
    var rowLength = oTable.rows.length;

    //loops through rows
    for (var i = 0; i < rowLength; i++){

        //gets cells of current row
        var oCells = oTable.rows.item(i).cells;

        //gets amount of cells of current row
        var cellLength = oCells.length;

        //loops through each cell in current row
        for(var j = 0; j < cellLength; j++){

            // get your cell info here
            // var cellVal = oCells.item(j).innerHTML;


 cellVal = oCells[j].querySelector("input").value || oCells[j].querySelector("select").value || 0;

            console.log(cellVal);

        }
    }

    getData();

}

function getData()
{

    const arr = [document.querySelectorAll("#rowData [name=product_id]")] // cast to array to use forEach
        .map(ele => ({ "product_id": ele.value, "product_qnty": ele.closest("tr").querySelector("[name^=product_qnty]").value }));
    console.log(arr)

}

HTML :

<tbody class="text-center" id="rowData">

        <tr class="items" id="item1">
         <td>1</td>
         <td class="d-none d-print-none"><input type="hidden" id="product_id" name="product_id"></td>
         <td><input type="text" id="product_sku"></td>
          <td><select id="products">
              <option>Select Product</option>
              </select>
          </td>
 <td class="d-print-none"><input type="number" id="total_qnty" disabled></td>
         <td><input type="number" id="product_sp" step=".01" required></td>
         <td><input type="number" id="product_qnty" name="product_qnty" required></td>
         <td><input type="number" id="gst_perc" step=".01" min="0" max="100"></td>
          <td><input type="number" id="tax_perc" step=".01" min="0" max="100"></td>
          <td><input type="number" id="disc_perc" step=".01" min="0" max="100"></td>
          <td><input type="number" id="final_price" step=".01" required></td>
      </tr>
</tbody>
</table>

檢查元素（在發票中添加 3 行后）：

    <tr class="items" id="item1">
       <td>1</td>
       <td class="d-none d-print-none"><input type="hidden" id="product_id" name="product_id" value="8"></td>
       <td><input type="text" id="product_sku"></td>
       <td><select id="products">
            <option>Select Product</option>
            <option value="Apple Watch Series 3 - Purple">Apple Watch Series 3 - Purple</option>
    <option value="Apple Watch Series 6 - Black">Apple Watch Series 6 - Black</option>
    <option value="Color check - Blue">Color check - Blue</option>
    <option value="Gucci sport Bag pro plus new demo - Grey">Gucci sport Bag pro plus new demo - Grey</option>
    <option value="iPad 5 - White">iPad 5 - White</option>
    <option value="Iphone 12 Mini - Blue">Iphone 12 Mini - Blue</option><option value="Iphone 12 Pro - Green">Iphone 12 Pro - Green</option>
    <option value="Iphone 12 Pro - -">Iphone 12 Pro - -</option>
    <option value="Nike Sport Plus - Yellow">Nike Sport Plus - Yellow</option>
    <option value="Puma Shoes - Brown">Puma Shoes - Brown</option>
    <option value="smart watch - -">smart watch - -</option>
    </select>
    </td>
    <td class="d-print-none"><input type="number" id="total_qnty" disabled=""></td>
    <td><input type="number" id="product_sp" step=".01" required=""></td>
    <td><input type="number" id="product_qnty" name="product_qnty" required="" max="2" min="1"></td>
    <td><input type="number" id="gst_perc" step=".01" min="0" max="100"></td>
   <td><input type="number" id="tax_perc" step=".01" min="0" max="100"></td>
    <td><input type="number" id="disc_perc" step=".01" min="0" max="100"></td>
   <td><input type="number" id="final_price" step=".01" required=""></td>
  </tr>

<!-- SECOND ROW OF INVOICE ---->

<tr class="items" id="item1">
<td>2</td>
<td class="d-none d-print-none"><input type="hidden" id="product_id2" name="product_id" value="7" class="product-id"></td>
 <td><input type="text" id="product_sku2"></td>
 <td><select id="products2" class="product-selector">
     <option>Select Product</option>
     <option value="Apple Watch Series 3 - Purple">Apple Watch Series 3 - Purple</option>
    <option value="Apple Watch Series 6 - Black">Apple Watch Series 6 - Black</option>
   <option value="Color check - Blue">Color check - Blue</option> 
   <option value="Gucci sport Bag pro plus new demo - Grey">Gucci sport Bag pro plus new demo - Grey</option>
  <option value="Iphone 12 Mini - Blue">Iphone 12 Mini - Blue</option> 
  <option value="Iphone 12 Pro - Green">Iphone 12 Pro - Green</option> 
 <option value="Iphone 12 Pro - -">Iphone 12 Pro - -</option>
  <option value="Nike Sport Plus - Yellow">Nike Sport Plus - Yellow</option>
  <option value="Puma Shoes - Brown">Puma Shoes - Brown</option><option value="smart watch - -">smart watch - -</option></select>
   </td>
   <td class="d-print-none"><input type="number" id="total_qnty2" disabled=""></td>
    <td><input type="number" id="product_sp2" step=".01" required="" class="product-price"></td>
     <td><input type="number" id="product_qnty2" name="product_qnty" required="" max="38" min="1" class="product-qnty"></td>
     <td><input type="number" id="gst_perc2" step=".01" min="0" max="100" class="product-gst"></td>
      <td><input type="number" id="tax_perc2" step=".01" min="0" max="100" class="product-tax"></td>
       <td><input type="number" id="disc_perc2" step=".01" min="0" max="100" class="product-disc"></td>
      <td><input type="number" id="final_price2" step=".01" required="" class="product-total"></td>
      </tr>

<!---THIRD ROW OF INVOICE --->

<tr class="items" id="item1">
  <td>3</td>
  <td class="d-none d-print-none"><input type="hidden" id="product_id3" name="product_id" value="35" class="product-id"></td>
  <td><input type="text" id="product_sku3"></td>
  <td><select id="products3" class="product-selector">
      <option>Select Product</option>
      <option value="Apple Watch Series 3 - Purple">Apple Watch Series 3 - Purple</option>
      <option value="Apple Watch Series 6 - Black">Apple Watch Series 6 - Black</option>
    <option value="Color check - Blue">Color check - Blue</option> 
     <option value="Gucci sport Bag pro plus new demo - Grey">Gucci sport Bag pro plus new demo - Grey</option>
    <option value="Iphone 12 Mini - Blue">Iphone 12 Mini - Blue</option> 
      <option value="Iphone 12 Pro - Green">Iphone 12 Pro - Green</option>
    <option value="Nike Sport Plus - Yellow">Nike Sport Plus - Yellow</option>
   <option value="Puma Shoes - Brown">Puma Shoes - Brown</option><option value="smart watch - -">smart watch - -</option>
</select>
    </td>
    <td class="d-print-none"><input type="number" id="total_qnty3" disabled=""></td>
   <td><input type="number" id="product_sp3" step=".01" required="" class="product-price"></td>
    <td><input type="number" id="product_qnty3" name="product_qnty" required="" max="3" min="1" class="product-qnty"></td>
    <td><input type="number" id="gst_perc3" step=".01" min="0" max="100" class="product-gst"></td>
     <td><input type="number" id="tax_perc3" step=".01" min="0" max="100" class="product-tax"></td>
     <td><input type="number" id="disc_perc3" step=".01" min="0" max="100" class="product-disc"></td>
     <td><input type="number" id="final_price3" step=".01" required="" class="product-total"></td>
     </tr>
          

我如何獲取值並將其存儲為 JSON 格式？

Answer 1

要獲取一系列產品 ID 及其數量，您可以按如下方式使用 jQuery

 $(function() { $("#print_invoice").on("click", function(e) { e.preventDefault(); // stop submission const arr = $("#rowData [id^=product_id]") .map(function() { const $qnty = $(this).closest("tr").find("[id^=product_qnty]") return ({ [$(this).attr("id")]: $(this).val(), [$qnty.attr("id")]: $qnty.val() }) }) .get(); console.log(arr) }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script> <form id="invoice_data_process"> <div class="row pt-1 px-2 py-2 border border-top-0"> <div class="table-responsive px-2" style="overflow-x: hidden"> <table class="table table-striped table-sm table-bordered animated animatedFadeInRight fadeInRight" id="mainTable"> <thead class="text-center" style="background-color: lightgrey"> <tr> <th>Sr.</th> <th class="d-print-none d-none">id</th> <th>ID/SKU</th> <th>Product Name</th> <th class="d-print-none">Total Qty</th> <th>Price (₹)</th> <th>Qnty</th> <th>GST%</th> <th>Tax%</th> <th>Disc%</th> <th>Total (₹)</th> </tr> </thead> <tbody class="text-center" id="rowData"> <tr class="items" id="item1"> <td>1</td> <td class="d-none d-print-none"><input type="hidden" id="product_id" name="product_id" value="8"></td> <td><input type="text" id="product_sku"></td> <td> <select id="products"> <option>Select Product</option> <option value="Apple Watch Series 3 - Purple">Apple Watch Series 3 - Purple</option> <option value="Apple Watch Series 6 - Black">Apple Watch Series 6 - Black</option> <option value="Color check - Blue">Color check - Blue</option> <option value="Gucci sport Bag pro plus new demo - Grey">Gucci sport Bag pro plus new demo - Grey</option> <option value="iPad 5 - White">iPad 5 - White</option> <option value="Iphone 12 Mini - Blue">Iphone 12 Mini - Blue</option> <option value="Iphone 12 Pro - Green">Iphone 12 Pro - Green</option> <option value="Iphone 12 Pro - -">Iphone 12 Pro - -</option> <option value="Nike Sport Plus - Yellow">Nike Sport Plus - Yellow</option> <option value="Puma Shoes - Brown">Puma Shoes - Brown</option> <option value="smart watch - -">smart watch - -</option> </select> </td> <td class="d-print-none"><input type="number" id="total_qnty" disabled=""></td> <td><input type="number" id="product_sp" step=".01" required=""></td> <td><input type="number" id="product_qnty" name="product_qnty" required="" max="2" min="1"></td> <td><input type="number" id="gst_perc" step=".01" min="0" max="100"></td> <td><input type="number" id="tax_perc" step=".01" min="0" max="100"></td> <td><input type="number" id="disc_perc" step=".01" min="0" max="100"></td> <td><input type="number" id="final_price" step=".01" required=""></td> </tr> <!-- SECOND ROW OF INVOICE ----> <tr class="items" id="item1"> <td>2</td> <td class="d-none d-print-none"><input type="hidden" id="product_id2" name="product_id" value="7" class="product-id"></td> <td><input type="text" id="product_sku2"></td> <td> <select id="products2" class="product-selector"> <option>Select Product</option> <option value="Apple Watch Series 3 - Purple">Apple Watch Series 3 - Purple</option> <option value="Apple Watch Series 6 - Black">Apple Watch Series 6 - Black</option> <option value="Color check - Blue">Color check - Blue</option> <option value="Gucci sport Bag pro plus new demo - Grey">Gucci sport Bag pro plus new demo - Grey</option> <option value="Iphone 12 Mini - Blue">Iphone 12 Mini - Blue</option> <option value="Iphone 12 Pro - Green">Iphone 12 Pro - Green</option> <option value="Iphone 12 Pro - -">Iphone 12 Pro - -</option> <option value="Nike Sport Plus - Yellow">Nike Sport Plus - Yellow</option> <option value="Puma Shoes - Brown">Puma Shoes - Brown</option> <option value="smart watch - -">smart watch - -</option> </select> </td> <td class="d-print-none"><input type="number" id="total_qnty2" disabled=""></td> <td><input type="number" id="product_sp2" step=".01" required="" class="product-price"></td> <td><input type="number" id="product_qnty2" name="product_qnty" required="" max="38" min="1" class="product-qnty"></td> <td><input type="number" id="gst_perc2" step=".01" min="0" max="100" class="product-gst"></td> <td><input type="number" id="tax_perc2" step=".01" min="0" max="100" class="product-tax"></td> <td><input type="number" id="disc_perc2" step=".01" min="0" max="100" class="product-disc"></td> <td><input type="number" id="final_price2" step=".01" required="" class="product-total"></td> </tr> <!---THIRD ROW OF INVOICE ---> <tr class="items" id="item1"> <td>3</td> <td class="d-none d-print-none"><input type="hidden" id="product_id3" name="product_id" value="35" class="product-id"></td> <td><input type="text" id="product_sku3"></td> <td> <select id="products3" class="product-selector"> <option>Select Product</option> <option value="Apple Watch Series 3 - Purple">Apple Watch Series 3 - Purple</option> <option value="Apple Watch Series 6 - Black">Apple Watch Series 6 - Black</option> <option value="Color check - Blue">Color check - Blue</option> <option value="Gucci sport Bag pro plus new demo - Grey">Gucci sport Bag pro plus new demo - Grey</option> <option value="Iphone 12 Mini - Blue">Iphone 12 Mini - Blue</option> <option value="Iphone 12 Pro - Green">Iphone 12 Pro - Green</option> <option value="Nike Sport Plus - Yellow">Nike Sport Plus - Yellow</option> <option value="Puma Shoes - Brown">Puma Shoes - Brown</option> <option value="smart watch - -">smart watch - -</option> </select> </td> <td class="d-print-none"><input type="number" id="total_qnty3" disabled=""></td> <td><input type="number" id="product_sp3" step=".01" required="" class="product-price"></td> <td><input type="number" id="product_qnty3" name="product_qnty" required="" max="3" min="1" class="product-qnty"></td> <td><input type="number" id="gst_perc3" step=".01" min="0" max="100" class="product-gst"></td> <td><input type="number" id="tax_perc3" step=".01" min="0" max="100" class="product-tax"></td> <td><input type="number" id="disc_perc3" step=".01" min="0" max="100" class="product-disc"></td> <td><input type="number" id="final_price3" step=".01" required="" class="product-total"></td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="text-center"> <input type="checkbox" id="checkInvoice" value="1" class="d-print-none" /> <label for="checkInvoice" class="text-danger d-print-none"><small>I have reviewed & checked the Invoice data for printing</small></label> </div> <div class="row justify-content-center"> <button class="btn btn-primary btn-sm d-print-none" type="submit" id="print_invoice">Process & Print Invoice</button> </div> </form>

Answer 2

多年來，JavaScript 管理和更新 DOM 的方式有了巨大的改進，在您的情況下，獲取表單值。

在這里，我選擇用表querySelector ，然后我用這個元素來選擇輸入，選擇，並與textarea元素querySelectorAll （如果需要，你可以添加更多的表單元素到該列表）。

然后您可以map這些元素並返回它們的值。

 // Get the table const table = document.querySelector('table'); // Now find all the form elements within the table const elements = table.querySelectorAll('input, select, textarea'); // Handle the form submission const button = document.querySelector('button'); button.addEventListener('click', handleClick, false); function handleClick() { // We can't use `map` directly on a nodelist from querySelectorAll // so we need to change it to a proper array // Here we're iterating over the elements and creating a new // array of objects with the element name as the key, // and the value as, well, the value const data = Array.from(elements).map(el => ({ [el.name]: el.value })); // Stringify the data! console.log(JSON.stringify(data)); }

 <table> <tbody> <tr> <td><input name="name" placeholder="Some text" type="text" /></td></tr> <tr><td> <select name="products"> <option selected disabled>Select Product</option> <option>Bob</option> <option>Steve</option> <option>Doris</option> </select> </td></tr> <tr><td><input name="number" type="number" /></td></tr> <tr><td><textarea name="area"></textarea></td></tr> </tbody> </table> <button>Click me</button>