我有一个动态表,我需要将所有数据捕获到json格式。我不能粘贴我的表的代码,但它看起来像这样:
<table id ="test">
<tbody id="Section1" class="theBody">
<tr class="pro" id="Project1">
<td><select class="pro"></select></td>
<td><input></input></td>
</tr>
<tr class="task" id="Task1">
<td><select class="tasks"></select></td>
<td><input></input></td>
</tr>
</tbody>
</table>
请参考下图: real table 根据图片,当我点击标题处的(+)按钮时,它将添加Project + Activity行。 当我单击选择项目下拉列表旁边的(+)按钮时,它将仅为该项目添加行任务。 一个TBODY只包含一个项目。 一个项目可以有任意数量的活动。
好的,现在我需要抓取jSOn格式的所有数据。我尝试运行此代码并失败:
function json() {
var task = {};
var data = {};
var tasks = [];
var taskdetail = [];
var taskarray = [];
project = {};
task = {};
tasklist = {};
//date got from bootstrap calendar.
var Sdate = $('#startDate').html();
var Edate = $('#endDate').html();
var daterange = { "startDate": Sdate, "endDate": Edate };
task['week'] = daterange;
$('.theBody').each(function () {
var parent = $(this).attr('id');
var pro = $(this).find('tr:first').attr('id');
//alert(pro);
$(this).find('tr:first').each(function () {
task2 = {};
var projnameid = $(this).find('td:first');
var projnme = $('.pro', projnameid).val();
task['projectname'] = projnme;
$(this).siblings('tr').each(function () {
var item = {};
var item2 = {};
var tasknameid = $(this).find('td:first');
var tasknme = $('.task', tasknameid).val();
item['taskname'] = tasknme;
taskarray.push(item);
$(this).find("input:text").each(function () {
var inputname = $(this).attr("name");
var inputvalue = $(this).val();
item['day'] = inputname;
item['hour'] = inputvalue;
alert(inputname + inputvalue);
taskarray.push(item);
});
});
});
tasks.push(taskarray);
task.tasks = tasks;
console.log(task);
document.getElementById('output').innerHTML = JSON.stringify(task);
event.preventDefault();
});
}
我需要json看起来像这样:
{
"week":{
"startDate":"2017-01-1",
"endDate":"2017-01-7"
},
"projectname":"projectname1",
"tasks":[
{
"taskname":"taskname1",
"taskdetail":[
{
"day":"sun",
"hour":"0"
},
{
"day":"sat",
"hour":"0"
}
],
}
],
"projectname":"projectname2",
"tasks":[
{
"taskname":"taskname1",
"taskdetail":[
{
"day":"sun",
"hour":"0"
},
{
"day":"sat",
"hour":"0"
}
],
}
],
}
欢迎双方提出任何帮助/建议/提示/更正。我真的需要你们这些问题的专家。感谢
答案 0 :(得分:0)
首先,您的json似乎无效,因为您将拥有重复的密钥,因此我将您的json格式修改为以下内容。
{
"week":{
"startDate":"2017-01-1",
"endDate":"2017-01-7"
},
"projects":[
{
"projectname":"projectname1",
"tasks":[
{
"taskname":"taskname1",
"taskdetail":[
{
"day":"sun",
"hour":"0"
},
{
"day":"sat",
"hour":"0"
}
]
}
]
},
{
"projectname":"projectname2",
"tasks":[
{
"taskname":"taskname1",
"taskdetail":[
{
"day":"sun",
"hour":"0"
},
{
"day":"sat",
"hour":"0"
}
],
}
]
}
]
}
注意:使用JSONViewer之类的工具可以更轻松地进行可视化。
假设这是您想要的JSON输出,并且我对您的html结构做了一些假设,请参阅下面的工作html和js代码。
function json() {
var week_data = {
"startDate": $('#startDate').html(),
"endDate": $('#endDate').html()
};
var projects_data = [];
$('.theBody').each(function() {
var projectname_data = $(this).find('tr.pro select').val();
var tasks_data = [];
$(this).find('tr.task').each(function() {
var taskname_data = $(this).find('select.tasks').val();
var taskdetail_data = [];
$(this).find('input').each(function() {
taskdetail_data.push({
day: $(this).attr('name'),
hour: $(this).val()
});
});
tasks_data.push({
taskname: taskname_data,
taskdetail: taskdetail_data
});
});
projects_data.push({
projectname: projectname_data,
tasks: tasks_data
});
});
var output = {
week: week_data,
projects: projects_data
};
$('#output').html(JSON.stringify(output));
}
$(function(){
json();
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="startDate">2017-01-1</div>
<div id="endDate">2017-01-7</div>
<table id ="test">
<tbody id="Section1" class="theBody">
<tr class="pro" id="Project1">
<td><select class="pro">
<option value="projectname1" selected>projectname1</option>
<option value="projectname2">projectname2</option>
</select></td>
<td><input /></td>
</tr>
<tr class="task" id="Task1">
<td><select class="tasks">
<option value="talking">talking</option>
<option value="walking" selected>walking</option>
</select></td>
<td><input name="mon" value="3" /></td>
<td><input name="tue" value="9" /></td>
</tr>
<tr class="task" id="Task2">
<td><select class="tasks">
<option value="talking" selected>talking</option>
<option value="walking">walking</option>
</select></td>
<td><input name="wed" value="7" /></td>
<td><input name="thu" value="4" /></td>
</tr>
</tbody>
<tbody id="Section2" class="theBody">
<tr class="pro" id="Project2">
<td><select class="pro">
<option value="projectname1">projectname1</option>
<option value="projectname2" selected>projectname2</option>
</select></td>
<td><input /></td>
</tr>
<tr class="task" id="Task3">
<td><select class="tasks">
<option value="talking" selected>talking</option>
<option value="walking">walking</option>
</select></td>
<td><input name="sun" value="8" /></td>
<td><input name="sat" value="2" /></td>
</tr>
</tbody>
</table>
<div id="output"></div>
&#13;