javascript - Save a dynamic HTML table in JSON

Question

In my code below user choose a color and types customer name and adds the data to a dynamic table. My problem is that I want to save my table in JSON but my code saves only the first row of the table and it doesn't adds rest of the rows

function colorddRow() {
  var colorpartsrows = "";
  var colparts = $("#color-part-list").val();
  var customer = $("#customer-name").val();

  var colpartssum = $("#color-part-list :selected").length;

  colorpartsrows +=
    "<tr><td>" +
    colparts +
    "</td><td>" +
    customer +
    "</td><td>" +
    colpartssum +
    "</td></tr>";
  $(colorpartsrows).appendTo("#dataTable1-color-parts tbody");
}

function showValues() {
  var fields = $(":input").serializeArray();
  $("#results").empty();
  jQuery.each(fields, function(i, field) {
    $("#results").append(field.value + " ");
  });
}
$("select").change(showValues);
showValues();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th name="color[]" id="color">Color</th>
    <th name="Customer[]" id="customer">Color</th>
  </tr>
  <tr>
    <td id="color-des">
      <select id="color-part-list" data-placeholder="Rejected Parts">
        <option value="Red">Red</option>
        <option value="Grey">Grey</option>
        <option value="Blue">Blue</option>
        <option value="Yellow">Yellow</option>
        <option value="White">White</option>
        <option value="Black">Black</option>
      </select>
    </td>
    <td id="customer">
      <input id="customer-name" type="text" name="customer">
    </td>
  </tr>
</table>

<input type="button" value="Add The Color" onclick="colorddRow()" />

<table id="dataTable1-color-parts">
 <tr>
    <th>Color</th>
    <th>Customer Name</th>
</tr>  
</table>
<button type="button" onclick="showValues()">Save to JSON</button>

question from:https://stackoverflow.com/questions/65896460/save-a-dynamic-html-table-in-json

Answer 1

I have done that...

const   // ------------------------------------------------------- ↓↓↓↓↓ added!
    result_Table = document.querySelector('#dataTable1-color-parts tbody')
  , select_Color = document.querySelector('#color-part-list')
  , custom_Color = document.querySelector('#customer-name')
  ;
function colorddRow()
  {
  let newRow = result_Table.insertRow()
  newRow.insertCell().textContent = select_Color.value
  newRow.insertCell().textContent = custom_Color.value
  newRow.insertCell().textContent = "1"
  }
function showValues()
  {
  let jsonTable = []
  for (let r=0; r<result_Table.rows.length; ++r)
    {
    let colparts = result_Table.rows[r].cells[0].textContent
      , customer = result_Table.rows[r].cells[1].textContent
      , sum      = result_Table.rows[r].cells[2].textContent
      ;
    jsonTable.push( {colparts,customer,sum} )
    }
  console.clear()
  console.log( jsonTable )
  }

#dataTable1-color-parts  {
  border-collapse : collapse;
  margin          : 2em 1em;
  }
#dataTable1-color-parts th,
#dataTable1-color-parts td {
  padding    : .2em .8em;
  border     : 1px solid darkblue;
  cursor     : pointer;
  }
#dataTable1-color-parts thead {
  background-color:  #c3e3ee;
  }
  
.as-console-wrapper { max-height:100% !important; top:0; left:50% !important; width:50%; }
.as-console-row         { background-color: yellow; }
.as-console-row::after  { display:none !important; }
.as-console-row::before { content: 'JSON'; font-size: .8em; }

<table>
  <tr>
    <th name="color[]" id="color">Color</th>
    <th name="Customer[]" id="customer">Color</th>
  </tr>
  <tr>
    <td id="color-des">
      <select id="color-part-list">
        <option value="Red">Red</option>
        <option value="Grey">Grey</option>
        <option value="Blue">Blue</option>
        <option value="Yellow">Yellow</option>
        <option value="White">White</option>
        <option value="Black">Black</option>
      </select>
    </td>
    <td id="customer">
      <input id="customer-name" type="text" name="customer">
    </td>
  </tr>
</table>

<input type="button" value="Add The Color" onclick="colorddRow()" />

<table id="dataTable1-color-parts">
  <thead>
    <tr><th>colparts</th><th>customer</th><th>sum</th></tr>
  </thead>
  <tbody></tbody>
</table>

<button type="button" onclick="showValues()">Save to JSON</button>