jquery创建分组的table

<!--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);
}
});







  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值