前台js控制表格增加的小demo整理

1.前台页面相关例子

            <div class="row cl">
            <div class="col-1"></div>
            <div class="col-9">
            <table id="coOrgList" class="table table-border table-bordered table-hover table-bg " style="margin-top: 10px;">
            <thead>
                <tr class="text-c">
                    <th>序号</th>
                    <th>示范事项名称</th>
                    <th>事项示范类型</th>
                    <th>事项简述</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>

          </tbody>
        </table>
        </div>
        <div class="col-2"></div>
        </div>
  <div style="margin-left:160px; margin-top:10px;">

      <span><a onclick="Data();"  class="btn btn-primary radius" style="text-decoration: none">添加事项</a></span>

      </div>
<script type="text/javascript"> 
 function Data(){
      //传到后台的路径，并且在后台跳转添加事项的页面
       var url="addItem.do";
       var index = layer.open({
            type : 2,
            title : "添加示范事项",
            content : url,
        });
        layer.full(index);
    }

</script>     

2.js为上面的表格动态增加填写的相关内容（添加事项的页面）

<div class="pd-20">
  <form action="" method="post" class="form form-horizontal" id="form">

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>示范事项：</label>
            <div class="formControls col-5">
                <input id="name" name="name" class="input-text radius" type="text" value="" datatype="*" nullmsg="示范事项名称不能为空">
            </div>
            <div class="col-4"> </div>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>示范事项类型：</label>
            <div class="formControls col-5">
                <select class="input-text radius" id="itemType" datatype="*" nullmsg="事项示范类型不能为空">
                    <option value="">请选择</option>
                    <#list list as item>
                        <option value="${item.id!}-${item.name!}">${item.name!}</option>
                    </#list>
                </select>  
            </div>
            <div class="col-4"> </div>
        </div>

         <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>事项描述：</label>
            <div class="formControls col-5"> 

                <textarea name="description" cols="" rows="" class="textarea radius"  datatype="*" nullmsg="事项描述不能为空" id="description"></textarea>

                    </div>
            <div class="col-4"> </div>
        </div>

        <div class="row cl">
            <div class="col-9 col-offset-3">
            <#if itemType=="6">
                <input class="btn radius" type="button" id="btn_sub" value="&nbsp;&nbsp;确定&nbsp;&nbsp;" onclick="checkButton();">

            <#else>

            <input class="btn radius" type="button" id="btn_sub" value="&nbsp;&nbsp;确定&nbsp;&nbsp;" onclick="checkUnitButton();">

            </#if>  

                <input class="btn radius" type="button" value="&nbsp;&nbsp;取消&nbsp;&nbsp;" onclick="returnsrc();">
            </div>
        </div>
    </form>
</div>

<script type="text/javascript"> 
function checkButton(){
    var name = $('#name').val();
        var itemType = $('#itemType').val().split("-")[0];
       var itemTypeName = $('#itemType').val().split("-")[1];
       var description = $('#description').val();
       if (name=="") {
       alert("请您填写示范事项的名称！");
       return false;
    }if (itemTypeName=="") {
        alert("请您选择事项示范类型！");
        return false;
    }if (description=="") {
         alert("请您填写示范事项的简述！");
         return false;
    }else{
    parent.$("#coOrgList tbody").append('<tr class="text-c"><td>'+index+'</td><td>'+name+'<input type="hidden" name="name" id="coName_'+index+'" value="'+name+'"></td><td>'+itemTypeName+'<input type="hidden" name="itemType" id="itemType_'+index+'" value="'+itemType+'"></td><td>'+description+'<input type="hidden" name="description" id="description_'+index+'" value="'+description+'"></td><td><a onclick="deleteOrg(this);">删除</a></td></tr>');
    <!-- layer将弹出的子页面关闭 -->
    var index = parent.layer.getFrameIndex(window.name);
    parent.layer.close(index);
    }

}
</script>