如何在Javascript中獲取表中每一行的值

Question

我有一個動態生成的表，看起來像這樣：

這是動態生成表格的方式

 var cageref = CatalogueDB.ref("cageawards/" + cagecode).limitToFirst(20); cageref.on('value', pullInventory, errData); function pullInventory(data) { var container = document.getElementById('inventoryContainer') console.log(data.val()) data.forEach(function(awardsSnap) { var awardItem = awardsSnap.val() // Attach an asynchronous callback to rea var NSNcard = ` <tr> <td class="serial">${awardItem.NSN}</td> <td> ${awardItem.Nomenclature} </td> <td> <span class="serial">${awardItem.Awarddate} </td> <td> <span class="product">${awardItem.Awardid}</span> </td> <td> <input type="text" placeholder="ie 100 EA" class="form-control" style="width: 110px;"> </td> <td> <input type="text" placeholder="ie $9.23 " class="form-control" style="width: 110px;"> </td> </tr> `; container.innerHTML += NSNcard; }); } 

 <div class="table-stats order-table ov-h"> <table class="table "> <thead> <tr> <th class="serial">NSN</th> <th>Nomenclature</th> <th>Award Date</th> <th>Award #</th> <th>Quantity</th> <th>Price per Unit</th> </tr> </thead> <tbody id="inventoryContainer"> </tbody> </table> </div> <!-- /.table-stats --> 

發生的情況是，向​​用戶顯示了他們的庫存，並且在每個項目旁邊都有一個用於輸入數量和價格的字段。 我現在想做的是添加一個“保存”按鈕。 單擊按鈕后，我想獲取每個可用訂單項的數量，價格和其他值。我是javascript的新手，我認為這是可能的。 我該怎么做？

Function saveInventory(){
// Get each of the line item values


}

Answer 1

如果要在單擊“保存”按鈕后獲取數組中表的值，則可以使用類似以下的內容

 //Run saveInventory function on Save document.querySelector(".btn").addEventListener("click", e => { saveInventory(); }); function saveInventory() { //Loop over th and crate column Header array const columnHeader = Array.prototype.map.call( document.querySelectorAll(".table th"), th => { return th.innerHTML; } ); //Loop over tr elements inside table body and create the object with key being the column header and value the table data. const tableContent = Object.values( document.querySelectorAll(".table tbody tr") ).map(tr => { const tableRow = Object.values(tr.querySelectorAll("td")).reduce( (accum, curr, i) => { const obj = { ...accum }; obj[columnHeader[i]] = curr.innerHTML; return obj; }, {} ); return tableRow; }); console.log(tableContent); } 

 <div class="table-stats order-table ov-h"> <table class="table"> <thead> <tr> <th class="serial">NSN</th> <th>Nomenclature</th> <th>Award Date</th> <th>Award #</th> <th>Quantity</th> <th>Price per Unit</th> </tr> </thead> <tbody id="inventoryContainer"> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> </tbody> </table><button class="btn"> Save </button> </div>