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>

Answer 1

You do not want to save input, your want to save cell text

 const arr = [] function colorddRow() { var colparts = $("#color-part-list").val(); var customer = $("#customer-name").val(); var colpartssum = $("#color-part-list:selected").length; if (colparts && customer && colpartssum) { arr.push({ colparts, customer, colpartssum }); $("#dataTable1-color-parts tbody").html( arr.map(({ colparts, customer, colpartssum }) => `<tr><td>${colparts}</td><td>${customer}</td><td>${colpartssum}</td></tr>`).join("")) } } function showValues() { $("#results").html( arr.length > 0? JSON.stringify(arr): "" ) } $("#add").on("click", colorddRow) $("#save").on("click", showValues)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <thead> <tr> <th name="color[]" id="color">Color</th> <th name="Customer[]" id="customer">Color</th> </tr> </thead> <tbody> <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> </tbody> </table> <input type="button" value="Add The Color" id="add" /> <button type="button" id="save">Save to JSON</button> <p><b>Results:</b> <span id="results"></span></p> <table id="dataTable1-color-parts"> <tr> <th>Color</th> <th>Customer Name</th> </tr> </table>

Answer 2

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>