Как получить значения каждой строки в таблице в 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="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 -->

происходит то, что пользователям показывается их инвентарь, а рядом с каждым элементом есть поле для ввода количества и цены. Что я хочу сделать сейчас, это добавить кнопку Сохранить. При нажатии кнопки я хочу получить количество, цену и другие значения для каждой доступной позиции. Я новичок в 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>