<!--html-->
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<form class='o' action="tagEdit" method="POST">
<div class="panel-body bt-border">
<div class="form-title">标签信息</div>
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right" width="155">标签名称:</td>
<td width="245"><input name="tagname" type="text" class="form-control"></td>
</tr>
<tr>
<td align="right" width="155">所属大类别:</td>
<td width="245">{{=bigClass}}</td>
<td width="245"><a class="block-margin" href="{{=URL('tagClassManage', 'edit')}}">新建大类别</a></td>
</tr>
<tr>
<td align="right" width="155">所属小类别:</td>
<td width="245">{{=midClass}}</td>
<td width="245"><a class="block-margin" href="{{=URL('tagClassManage', 'edit')}}">新建小类别</a></td>
</tr>
</table>
</div>
<div class="panel-body bt-border">
<div class="form-title">触发规则</div>
<div class="s">规则:<input type="button" value = "创建规则组"id="creatGroup"></div>
<div id = "fm" class="form-horizontal" role="form"> </div>
<div class="form-group"></div>
</div>
<div class="col-md-12" align="center">
<button type="submit" class="btn btn-primary" style="margin-top:5px" data-toggle="modal" data-target="#basicModal">保存</button>
<button id="cancel" class="btn" style="margin-top:5px">取消</button>
</div>
</form>
</div>
</div>
</div>
//------------js-----------------------
//创建表(增加行,删除行)
$("#fm div").attr("align","center");
$('#creatGroup').click(function(){
var _len = $("#fm div").length;
$("#fm").append("<div class='panel-body bt-border' id= 'div"+_len+"'><ul>规则组"+(_len+1)+"</ul> <table id= 'tab"+_len+"' value = '规则'>"
+"<tr align='center' id=0>"
+'<td width="10%" id="strsdiv'+_len+'">{{=all}}</td>'
+"<td width='10%' ><select name='baodiv"+_len+"'><option value='containOr'>包含</option><option value='notContainAnd'>不包含</option></select></td>"
+"<td width='30%'><input type='text' name='filldiv"+_len+"' id='fill' class='form-control'/></td>"
+"<td width='20%'><a href=\"#\" onclick = \'addTable(\"div"+_len+"\",\"tab"+_len+"\")\' >添加</a> <a href=\'#\' οnclick=\'deletTable(\"div"+_len+"\",\"tab"+_len+"\",0)\'>删除</a></td>"
+"</tr>"
+"</table>"
+"</div>");
});
<pre code_snippet_id="399133" snippet_file_name="blog_20140619_2_3629092" name="code" class="javascript">function addTable(div,tab){
var _len = $("#"+tab+" tr").length;
$("#"+tab+"").append("<tr align='center' id="+_len+">"
+'<td width="10%" id="strs'+div+'">{{=all}}</td>'
+"<td width='10%'><select name='bao"+div+"' ><option value='containOr'>包含</option><option value='notContainAnd'>不包含</option></select></select></td>"
+"<td width='30%'><input type='text' name='fill"+div+"' id='fill' class='form-control'/></td>"
+"<td width='20%'><a href=\"#\" onclick = \'addTable(\""+div+"\",\""+tab+"\")\' >添加</a> <a href=\'#\' οnclick=\'deletTable(\""+div+"\",\""+tab+"\","+_len+")\'>删除</a></td>"
+"</tr>");
$('td[id="strs'+div+'"] select').attr('name',"strs"+div);
}
function deletTable(div,tab,index){
var _len = $("#"+tab+" tr").length;
if(index == 0 & _len == 1){
$("#"+tab+" tr[id="+index+"]").remove();
$("#"+tab+"").remove();
$("#"+div+"").remove();
}else if(_len == 1){
$("#"+tab+" tr[id="+index+"]").remove();
$("#"+tab+"").remove();
$("#"+div+"").remove();
}else{
$("#"+tab+" tr[id="+index+"]").remove();
}
}
//创建组
$('#creatGroup').click(function(){
var count = $('#fm div').length;
for(var i=0;i<count;i++){
var name = 'div'+i;
$('td[id="strsdiv'+i+'"] select').attr('name',"strsdiv"+i);
}
});