save dynamic table into json
Question
what is the best way to save a dynamic table data in to json. I have two tables that i want to save in to one json file. i"m able to console the regular table data but i"m unable to locate the td value of a dynamic table.
- my plan to save to json and clear the forum for additional DC/pop info adding
so please check the save button and help me understand how to continue 1. save the popisp table 2. clear and make it ready for the next pop entry.
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"> $(document).ready(function(){ $(".add-row").click(function(){ var name = $("#ispname").val(); var capasity = $("#ispcapasity").val(); var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + capasity + "</td></tr>"; $('#popisp tr:last').after(markup); }); $(".delete-row").click(function(){ $('#popisp').find('input[name="record"]').each(function(){ if($(this).is(":checked")){ $(this).parents("tr").remove(); } }); }); $(".save_asJSON").click(function(){ var pop_name = document.getElementById("popname").value jsonobj.pops[pop_name] = { name: document.getElementById("popname").value, city: document.getElementById("popcity").value, subnet: document.getElementById("popsubnet").value, } console.log(jsonobj); }); }); var jsonobj = { pops: {} }; </script>
<body> <table id="PoP_Details"> <tr> <td>Pop name:</td> <th colspan="2"><input id="popname" name='pops[name]'></input></th> </tr> <tr> <td>City:</td> <th colspan="2"><input id="popcity" name='pops[name][city]'></input></th> <tr> <td>POP Subnet</td> <th colspan="2"><input id="popsubnet" name='pops[name][subnet]'></input></th> </tr> </table> <form> <input type="text" id="ispname" placeholder="Name"> <input type="text" id="ispcapasity" placeholder="capasity"> <input type="button" class="add-row" value="Add ISP"> </form> <div class="wrap"> <table id="popisp"> <thead> <tr> <th>Select</th> <th>Name</th> <th>capasity</th> </tr> </thead> <tbody> <tr> </tr> </tbody> </table> </div> <button type="button" class="delete-row">Delete Row</button> <button type="button" class="save_asJSON">Save</button> </body>
here is how I like my json to looks like
{ "pops": { "pop1": { "name": "pop1", "city": "blabla", "subnet": "192.168.1.0/24", "isps": [ { "name": "isp1", "capasity": "10M" }, { "name": "isp2", "capasity": "10M" } ] }, "pop2": { "name": "pop2", "city": "blabla", "subnet": "192.168.2.0/24", "isps": [ { "name": "isp3", "capasity": "20M" }, { "name": "isp4", "capasity": "30M" }, { "name": "isp5", "capasity": 500M" } ] } } }
1 answers
solution1
0 ACCPTED 2017-05-02 15:53:35
I can suggest the following guidance :
Save inputs as jQuery variables for further use, not necessary but usefull, ex :
var $input = $('#popname');Add a function that use the table, iterate through the
<tr>in<tbody>and retrieve the<td>to compose object to save for each row, return it as an array.Add a function that use the inputs to clear the form
Call the two function above when saving the array, the first to add the data to the json saved, the second to clear the form.
I show bellow an update of your snippet with complete modification, but I suggest you use use the guidance to implement it in a way that suits your needs.
$(document).ready(function(){ // Inputs as jQuery variables var $nameInput = $("#popname"); var $cityInput = $("#popcity"); var $subnetInput = $("#popsubnet"); var $ispNameInput = $("#ispname"); var $ispCapacityInput = $("#ispcapasity"); var $popispTable = $('#popisp'); // array for convenience loop var inputs = [$nameInput, $cityInput, $subnetInput, $ispNameInput, $ispCapacityInput]; // function to clear all inputs and remove isp rows function clearForm() { inputs.forEach(e => e.val('')); $popispTable.find('tbody').find('tr').remove(); $popispTable.find('tbody').append($('<tr>')); } // function that return an array of isp rows data function ispTableData() { var rows = $popispTable.find('tbody').find('tr'); if (!rows.length) return []; console.log(rows.length); var data = rows.toArray().reduce((data, e, k) => { var tds = $(e).find('td'); if (!tds.length) return []; data.push({ checked: $(tds[0]).find('input').is(":checked"), name: $(tds[1]).text(), capasity: $(tds[2]).text() }); return data; }, []); return data; } $(".add-row").click(function(){ var name = $("#ispname").val(); var capasity = $("#ispcapasity").val(); var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + capasity + "</td></tr>"; $('#popisp tr:last').after(markup); // eventually clear row form inputs here as well }); $(".delete-row").click(function(){ $('#popisp').find('input[name="record"]').each(function(){ if($(this).is(":checked")){ $(this).parents("tr").remove(); } }); }); $(".save_asJSON").click(function(){ var pop_name = document.getElementById("popname").value jsonobj.pops[pop_name] = { name: $("#popname").val(), city: $("#popname").val(), subnet: $("#popsubnet").val(), // add the isp rows data isps: ispTableData() } console.log(jsonobj); // clear the form clearForm(); }); }); var jsonobj = { pops: {} };
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <table id="PoP_Details"> <tr> <td>Pop name:</td> <th colspan="2"><input id="popname" name='pops[name]'></input></th> </tr> <tr> <td>City:</td> <th colspan="2"><input id="popcity" name='pops[name][city]'></input></th> <tr> <td>POP Subnet</td> <th colspan="2"><input id="popsubnet" name='pops[name][subnet]'></input></th> </tr> </table> <form> <input type="text" id="ispname" placeholder="Name"> <input type="text" id="ispcapasity" placeholder="capasity"> <input type="button" class="add-row" value="Add ISP"> </form> <div class="wrap"> <table id="popisp"> <thead> <tr> <th>Select</th> <th>Name</th> <th>capasity</th> </tr> </thead> <tbody> <tr> </tr> </tbody> </table> </div> <button type="button" class="delete-row">Delete Row</button> <button type="button" class="save_asJSON">Save</button> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.