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="i.e. 100 EA" class="form-control" style="width: 110px;">

                     </td>
                    <td> 
                        <input type="text" placeholder="i.e. $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>