这是我的代码:
<form class="form-group" id="formAdd">
<table class="table table-striped table-condensed table-bordered table-overflow">
<thead>
<tr>
<th style="text-align:center" width="33%">Track</th>
<th style="text-align:center" width="33%">Category</th>
<th style="text-align:center" width="33%">Skills</th>
</tr>
</thead>
<tbody id="categoryContainer">
<tr>
<td id="trackContainer" rowspan="1" width="33%">
<input type="text" class="form-control" style="max-width: none;" name="track" ng-model="addTCS.track" />
</td>
<td colspan="2">
<table class="borderless" style="width: 100%;">
<tbody>
<tr>
<td width="50%" style="padding:0 8px 0 0;vertical-align:top;position:relative;">
<div class="form-group">
<input type="text" class="form-control category" style="max-width: none;" name="category[0]" id="category[0]" data-category-index="0"/>
</div>
<small style="position:absolute;bottom:0;right:8px;"><a href="" class="text-primary pull-right category-add" ng-click="addTCS.addCategory($event)">+ Add Category</a></small>
</td>
<td width="50%" style="padding:0 0 0 8px;vertical-align:top;">
<div class="skillContainer">
<div class="form-group">
<input type="text" class="form-control skill" style="max-width: none;" name="category[0].skill[0]" id="category[0].skill[0]" data-category-index="0" data-skill-index="0"/>
</div>
</div>
<small><a href="" class="text-primary pull-right" ng-click="addTCS.addSkill($event)">+ Add Skill</a></small>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"><cite>Note: All text fields are required.</cite></td>
</tr>
</tfoot>
</table>
<div class="form-group text-center">
<button class="btn btn-primary btn-md" type="button" ng-click="addTCS.cancel()">Cancel</button>
<button class="btn btn-success btn-md" type="button" ng-click="addTCS.submit()" ng-disabled="addTCS.formAdd.$invalid">Submit</button>
</div>
</form>
HTML输出的示例屏幕截图
现在我想为以下输出创建一个对象。 Track
只有一个,但一个曲目可以有多个Category
,每个类别可以有多个Skills
。
我想输出像
这样的对象Object >
track: "track1",
category :{
category1: {
0: "skill1 for category1"
1: "skill2 for category1"
},
category2: {
0: "skill1 for category2"
1: "skill2 for category2"
2: "skill3 for category2"
}
}
注意:我为该类别的行添加data-category-index
,为该类别的技能数量添加data-skill-index
答案 0 :(得分:1)
找到答案。我希望这对某人也有帮助
vm.submit = function () {
var tcs = {};
var category = {};
var cIndexPrev;
var categoryTemp;
var skills = [];
var element = document.querySelectorAll("#formAdd input");
element.forEach(function (elem) {
var categoryIndex = elem.dataset.categoryIndex;
var skillIndex = elem.dataset.skillIndex;
if (categoryIndex == undefined && skillIndex == undefined) {
tcs["track"] = elem.value;
} else if (categoryIndex != undefined && skillIndex == undefined) {
if (cIndexPrev == undefined) {
cIndexPrev = categoryIndex;
} else if (cIndexPrev !== categoryIndex) {
category[categoryTemp] = { skills: skills };
cIndexPrev = categoryIndex;
skills = [];
}
categoryTemp = elem.value;
} else if (categoryIndex != undefined && skillIndex != undefined) {
skills.push(elem.value);
}
});
if (skills.length > 0) {
category[categoryTemp] = { skills: skills };
}
tcs["category"] = category;
};