How to get the values of each row in a table in Javascript

Question

I have a table that is dynamically generated and looks like this:

This is how the table is dynamically generated

 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 --> 

what is happening is that users are shown their inventory and next to each item there is an input field for quantity and price. What I want to do now is add a SAVE button. On click of the button, I want to get the quantity and price and other values for each line item available.I'm new to javascript and I assume this is possible. How would I do that?

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


}

Answer 1

If you want to get the values of the table in array on click of save button, you can use something like this

 //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>