如何实现上述形象? json就像这样
{"track":
{"category1":
{"skill": "skill1","skill2","skill3","skill4"}
}
{"category2":
{"skill":"skill1","skill2","skill3","skill4"}
}
}
这是我到目前为止已经尝试过的。我不知道如何制作第3栏。
<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>
<tr>
<td rowspan="{{addTCS.trackSpan}}" style="vertical-align:middle;">
<input type="text" class="form-control" style="max-width: none;" name="track"/>
</td>
<td colspan="2" style="vertical-align:middle;">
<table class="table borderless">
<tbody id="categoryContainer">
<tr style="background-color: #f9f9f9;">
<td width="33%"><input type="text" class="form-control" style="max-width: none;" name="category" /></td>
<td id="skillParentContainer" width="33%">
<table class="table borderless">
<tbody id="skillContainer">
<tr style="background-color: #f9f9f9;">
<td><input type="text" class="form-control" style="max-width: none;" name="category" /></td>
</tr>
</tbody>
<tfoot style="background-color: #f9f9f9;">
<tr><td><small><a href="" class="text-primary pull-right" ng-click="addTCS.addSkill()">+ Add Skill</a></small></td></tr>
</tfoot>
</table>
</td>
</tr>
</tbody>
<tfoot style="background-color: #f9f9f9;">
<tr><td><small><a href="" class="text-primary pull-right" ng-click="addTCS.addCategory()">+ Add Category</a></small></td></tr>
</tfoot>
</table>
</td>
</tr>
</tbody>
</table>