到目前为止,我已经做到了。
function deleteGroup(e) {
e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode);
}
var count;
function addGroup() {
var countPlus=count+1;
group = $('<table class="modified-table" id="mainTab' + count + '"> <tr><td align="left"><a style="color: green;font-weight:bold ">[ Group '+countPlus+']</a></td><td colspan="10"></td></tr><tr><td><input type="text" name="type[]" placeholder="Type Name" size="30"/></td> <td><input type="text" placeholder="No. Of Total Credit" name="totalCr[]" size="30"/></td>'+'<td><LABEL><span>Add Sub Category</span><input type="checkbox" name="Yes" value="Yes" onchange="addSubCategory(event)"></LABEL></td><td><input class="button" value="Delete" onclick="deleteGroup(this)" size="5"/> </td></tr></table>');
$('#group').append(group);
count++;
}
function addSubCategory(e) {
var tableId = e.target.parentNode.parentNode.parentNode.parentNode.parentNode.id;
var i=0;
//alert(tableId);
if(tableId === "mainTable"){
i=0;
} else {
i= tableId.substr(tableId.length - 1);
}
row = $('<tr></tr><tr><td><input type="text" id="subType'+i+'" placeholder="Sub Type" name="subType['+i+'][]" size="20"></td><td><input type="text" placeholder="Total Credit" name="subCr['+i+'][]" size="20"></td><td><span class="" size="5" value=""/></td><td><input size="5" class="button" value="Delete" onclick="deleteGroup(this)" /></td></tr>'); //create row
$("#" + tableId).append(row);
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<TABLE>
<input type="button" class="button" value="Add Group" onclick="addGroup();" />
</TABLE>
<table class="modified-table" id="mainTab">
<tr>
<td align="left">
<a style="color: green;font-weight:bold ">[ Group 1]</a>
</td>
<td colspan="10"></td>
</tr>
<tr>
<td><input type="text" name="type[]" class="type-name" placeholder="Type Name" size="30"/></td>
<td><input type="text" name="totalCr[]"placeholder="No. Of Total Credit" size="30"/></td>
<td><LABEL>
<span>Add Sub Category</span>
<input type="checkbox" name="hasSub" onchange="addSubCategory(event)"></LABEL></td>
<td><input type="button" class="button" value="Delete" onclick="deleteGroup(this)" size="5"/>
</td>
</tr>
</table>
<table id="group">
</table>
</DIV>
&#13;
它再次创建具有唯一ID的动态数据 我这样做的方式可能是错的。
coz此处组保留为第一行和 子组保持第2,第3,第4行,依此类推。
此处添加群组按钮将创建群组和 添加子组按钮将添加该组的子组。
我需要可以按组/子组分隔的json数据。
LIke:
Group 0 :
Subgroup 0;
Subgroup 1;
Subgroup 2;
Group 1 :
Subgroup 0;
Subgroup 1;
Subgroup 2;
..........
..........
Group 2 :
Subgroup 0;
Subgroup 1;
Subgroup 2;
----------
感谢任何形式的帮助或建议。提前谢谢。