如何在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>