将动态表数据保存到json的最佳方法是什么。 我有两个表要保存到一个json文件中。 我能够控制常规表格数据，但我无法找到动态表格的td值。
所以请检查保存按钮并帮助我了解如何继续 1.保存popisp表 2.清除并为下一个pop条目做好准备。
<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>
这就是我喜欢我的json看起来像
的方式{ ＆＃34; pops＆＃34;：{ ＆＃34; pop1＆＃34;：{ ＆＃34; name＆＃34;：＆＃34; pop1＆＃34;， ＆＃34; city＆＃34;：＆＃34; blabla＆＃34;， ＆＃34;子网＆＃34;：＆＃34; 192.168.1.0/24"， ＆＃34; isps＆＃34;：[ { ＆＃34; name＆＃34;：＆＃34; isp1＆＃34;， ＆＃34; capasity＆＃34;：＆＃34; 10M＆＃34; }， { ＆＃34; name＆＃34;：＆＃34; isp2＆＃34;， ＆＃34; capasity＆＃34;：＆＃34; 10M＆＃34; } ] }， ＆＃34; pop2＆＃34;：{ ＆＃34; name＆＃34;：＆＃34; pop2＆＃34;， ＆＃34; city＆＃34;：＆＃34; blabla＆＃34;， ＆＃34;子网＆＃34;：＆＃34; 192.168.2.0/24"， ＆＃34; isps＆＃34;：[ { ＆＃34; name＆＃34;：＆＃34; isp3＆＃34;， ＆＃34; capasity＆＃34;：＆＃34; 20M＆＃34; }， { ＆＃34; name＆＃34;：＆＃34; isp4＆＃34;， ＆＃34; capasity＆＃34;：＆＃34; 30M＆＃34; }， { ＆＃34; name＆＃34;：＆＃34; isp5＆＃34;， ＆＃34; capasity＆＃34;：500M＆＃34; } ] } } }
答案 0 :(得分：0)
我可以建议以下指导：
将输入保存为jQuery变量以供进一步使用，不是必需但有用，例如：
var $input = $('#popname');
添加一个使用该表的函数，遍历<tr>中的<tbody>并检索<td>以组成对象以保存每一行，将其作为数组返回
添加一个使用输入清除表单的函数
保存数组时调用上面的两个函数，第一个将数据添加到保存的json中，第二个用于清除表单。
我将通过完整修改显示您的代码段更新，但我建议您使用指南以适合您需要的方式实施它。
$(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>