使用JQueryUI + FreeMarker 实现Div动态DIalog添加和删除_freemarker onclick="showtable(1)-CSDN博客

本文链接：https://blog.csdn.net/luoyali/article/details/46048915
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Language" content="zh-cn" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <title>企业基本信息</title>
    <link rel="stylesheet" type="text/css" href="${requestContext.relativePath}/resources/css/style.css" />
    <link rel="stylesheet" type="text/css" href="${requestContext.relativePath}/resources/images/imagesUrl.css" />
    <link rel="stylesheet" type="text/css" href="${requestContext.relativePath}/resources/images/icon.css"/>
    <link rel="stylesheet" type="text/css" href="${requestContext.relativePath}/resources/plugin/jquery-ui-1.11.4/jquery-ui.css"/>
    <script type="text/javascript" src="${requestContext.relativePath}/resources/js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="${requestContext.relativePath}/resources/js/jquery.form.js"></script>
    <script type="text/javascript" src="${requestContext.relativePath}/resources/plugin/jquery-ui-1.11.4/jquery-ui.js"></script>
    <script src="${requestContext.relativePath}/resources/js/common.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            /*回显得值*/
            $('#province').val("${(model.provincecode)!''}");
            $('#city').val("${(model.citycode)!''}");
            $('#county').val("${(model.countycode)!''}");
            $('#province').selectmenu();
            $('#city').selectmenu();
            $('#county').selectmenu();
            $('#share').selectmenu({
                change:function () {
                    var shareVal = $('#share').val();
                    var nonaturalPerson = $('#nonaturalPerson');
                    var naturalPerson = $('#naturalPerson');
                    if (shareVal === '01') {/*非自然人*/
                        nonaturalPerson.show();
                        naturalPerson.hide();
                    } else if (shareVal === '02') {/*自然人*/
                        nonaturalPerson.hide();
                        naturalPerson.show();
                    } else if (shareVal === '03') {/*自然人、非自然人*/
                        nonaturalPerson.show();
                        naturalPerson.show();
                    } else if(shareVal === ''){
                        naturalPerson.hide();
                        nonaturalPerson.hide();
                    }
                }
            });
            commonDialog('nonaturalPerDialog',{
                title:'非自然人股东新增',
                width:600,
                height:400,
                buttons:[{
                    id:'saveBtn',
                    title:'保存',
                    click:function(){
                    }
                },{
                    id:'closeBtn',
                    title:'关闭',
                    click:function(){
                        closeDialog('nonaturalPerDialog');
                    }
                }]
            });
            $('#jType1').selectmenu();

        });
        /*保存数据*/
        function saveDate(){
            /*数据验证*/
            if(isEmpty('regMoney','注册资本'))return;
            if(isEmpty('county','企业详细地址'))return;
            if(isEmpty('businessScope','经营范围'))return;
        }
        /*下一步*/
        function nextStep(url){
            window.location.href = url;
        }
        /*出资方式行号*/
        var jTypeNum=1;
        /*出资方式新增*/
        function insertJType(){
            /*拼接html*/
            jTypeNum++;
            var appendStr='<div class="eleContainer" lang="jType">'
                    +'<span class="titleText textS12 eleVAlignM">方式</span>&nbsp;'
                    +'<span class="selectEle eleVAlignM">'
                    +'<select id="jType'+jTypeNum+'" class="eleVAlignM w200">'
                    +'<option value="">选择出资方式</option>'
                    +'<option value="01">货物</option>'
                    +'</select>'
                    +'</span>'+'&nbsp;&nbsp;'
                    +'<span class="titleText textS12 eleVAlignM">金额</span>'+'&nbsp;'
                    +'<input id="jTypePrice'+jTypeNum+'" name="jTypePrice'+jTypeNum+'" class="textInput w120 eleRadius eleVAlignM" type="text">'
                    +'</div>';
            /*插入html到指定位置*/
            $(appendStr).insertBefore('#insertFlag');
            /*注册jqueryui selectmenu*/
            $('#jType'+jTypeNum).selectmenu();
        }
        /*删除行数*/
        function deleteJType(){
            var sum = $('[lang="jType"]').length;/*获得行数*/
            /*判断行数的值是否小小于一*/
            if(sum <= 1)
                commonAlert('提示','数据不能小于1行');
            else
                $('[lang="jType"]:last').remove();
        }
    </script>
</head>
<body>
<div class="pageContainer">
    <div class="eleContainer titleText textS16">
        名称核准申请-有限责任公司
    </div>
    <div class="eleContainer HLine"></div>
    <div class="eleContainer titleText textS14">注册资本(人民币)<span class="impSpan eleVAlignM">*</span></div>
    <div class="eleContainer">
        <input id="regMoney" name="" class="textInput w400 eleRadius" type="text">
    </div>
    <div class="eleContainer titleText textS14">企业详细地址<span class="impSpan eleVAlignM">*</span></div>
    <div class="eleContainer">
        <select id="province" class="eleVAlignM w100">
            <option value="">请选择</option>
            <option value="01">广东省</option>
            <option value="02">海南省</option>
        </select>
        <select id="city" class="eleVAlignM w100">
            <option value="">请选择</option>
            <option value="01">广州市</option>
            <option value="02">韶关市</option>
            <option value="03">深圳市</option>
            <option value="04">珠海市</option>
            <option value="05">汕头市</option>
            <option value="06">佛山市</option>
            <option value="07">江门市</option>
            <option value="08">湛江市</option>
            <option value="09">茂名市</option>
            <option value="10">肇庆市</option>
            <option value="11">惠州市</option>
            <option value="12">梅州市</option>
            <option value="13">汕尾市</option>
            <option value="14">河源市</option>
            <option value="15">阳江市</option>
            <option value="16">清远市</option>
            <option value="17">东莞市</option>
            <option value="18">中山市</option>
            <option value="19">潮州市</option>
            <option value="20">揭阳市</option>
            <option value="21">云浮市</option>
        </select>
        <select id="county" class="eleVAlignM w100">
            <option value="">请选择</option>
            <option value="01">荔湾区</option>
            <option value="02">越秀区</option>
            <option value="03">海珠区</option>
            <option value="04">天河区</option>
            <option value="05">白云区</option>
            <option value="06">黄埔区</option>
            <option value="07">番禺区</option>
            <option value="08">花都区</option>
            <option value="09">南沙区</option>
            <option value="10">萝岗区</option>
            <option value="11">增城区</option>
            <option value="12">从化市</option>
        </select>
    </div>
    <div class="eleContainer">
        <input id="" name="" class="textInput w400 eleRadius" type="text">
    </div>
    <div class="eleContainer titleText textS14">经营范围<span class="impSpan eleVAlignM">*</span></div>
    <div class="eleContainer">
        <textarea id="businessScope" name="" class="textArea w400 eleRadius"></textarea>
    </div>
    <div class="eleContainer titleText textS14">投资者组成类型<span class="impSpan eleVAlignM">*</span></div>
    <div class="eleContainer">
        <select id="share" class="eleVAlignM w400">
            <option value="" selected>请选择</option>
            <option value="01">只有非自然人股东</option>
            <option value="02">只有自然人股东</option>
            <option value="03">既有非自然人股东，又有自然人股东</option>
        </select>
    </div>
    <div id="nonaturalPerson" class="eleContainer eleHide">
        <table class="layoutTable eleRadius" cellpadding="0" cellspacing="1" border="0">
            <tr class="layoutTableHead">
                <th colspan="7">
                    非自然人股东信息
                </th>
            </tr>
            <tr>
                <td colspan="7">
                    &nbsp;&nbsp;<a onclick="openDialog('nonaturalPerDialog')" class="nav">新增非自然人股东</a>
                </td>
            </tr>
            <tr>
                <th>序号</th>
                <th>名称</th>
                <th>证照名称</th>
                <th>证照号码</th>
                <th>认缴金额（万元）</th>
                <th>出资百分比（%）</th>
                <th>操作</th>
            </tr>
            <tr>
                <th>1</th>
                <th>点点</th>
                <th>营业执照</th>
                <th>12345678</th>
                <th>100</th>
                <th>12</th>
                <th>
                    <span class="commonIconClick icon-edit"></span>
                    <span class="commonIconClick icon-remove"></span>
                </th>
            </tr>
        </table>
    </div>
    <div id="naturalPerson" class="eleContainer eleHide elePaddingBtm">
        <table class="layoutTable eleRadius" cellpadding="0" cellspacing="1" border="0">
            <tr class="layoutTableHead">
                <th colspan="7">
                    自然人股东信息
                </th>
            </tr>
            <tr>
                <td colspan="7">
                    &nbsp;&nbsp;<a onclick="openDialog('naturalPerDialog')" href="javascript:void(0)" class="nav">新增自然人股东</a>
                </td>
            </tr>
            <tr>
                <th>序号</th>
                <th>名称</th>
                <th>证照名称</th>
                <th>证照号码</th>
                <th>认缴金额（万元）</th>
                <th>出资百分比（%）</th>
                <th>操作</th>
            </tr>
            <tr>
                <th>1</th>
                <th>点点</th>
                <th>营业执照</th>
                <th>12345678</th>
                <th>100</th>
                <th>12</th>
                <th>
                    <span class="commonIconClick icon-edit"></span>
                    <span class="commonIconClick icon-remove"></span>
                </th>
            </tr>
        </table>
    </div>
    <div class="eleContainer eleAlignC">
        <input id="" value="上一步" class="commonBtn" type="button"/>&nbsp;
        <input id="" value="保存" onclick="saveDate()" class="commonBtn" type="button"/>&nbsp;
        <input id="" value="下一步" onclick="nextStep('/sdfer/namemanage/uploadApplicationInfo.html')" class="commonBtn" type="button"/>&nbsp;
    </div>
</div>
<!--dialog-->
<div id="nonaturalPerDialog">
    <form id="naturalPerForm">
        <div class="ctrlContainer">
            <div class="eleContainer titleText textS14">投资者性质</div>
            <div class="eleContainer">
                <select id="naturalPerDialog" class="eleVAlignM w100">
                    <option value="">自然人</option>
                </select>
            </div>
            <div class="eleContainer titleText textS14">证件名称<span class="impSpan">*</span></div>
            <div class="eleContainer">
                <select id="taxCerType" class="eleVAlignM w400">
                    <option value="" selected>居民身份证</option>
                    <option value="">居民身份证（港、澳、台）</option>
                    <option value="">军官证</option>
                    <option value="">警官证</option>
                    <option value="">外国（地区）护照</option>
                </select>
            </div>
            <div class="eleContainer titleText textS14">证件名称<span class="impSpan">*</span></div>
            <div class="eleContainer">
                <input id="" name="" class="textInput w400 eleRadius" type="text">
            </div>
            <div class="eleContainer titleText textS14">姓名<span class="impSpan">*</span></div>
            <div class="eleContainer">
                <input id="" name="" class="textInput w400 eleRadius" type="text">
            </div>
            <div class="eleContainer titleText textS14">联系电话<span class="impSpan">*</span></div>
            <div class="eleContainer">
                <input id="" name="" class="textInput w400 eleRadius" type="text">
            </div>
            <div class="eleContainer titleText textS14">住所<span class="impSpan">*</span></div>
            <div class="eleContainer">
                <input id="" name="" class="textInput w400 eleRadius" type="text">
            </div>
            <div class="eleContainer titleText textS14">认缴方式<span class="impSpan">*</span></div>
            <div id="deleteFlag" class="eleContainer" lang="jType">
                <span class="titleText textS12 eleVAlignM">方式</span>&nbsp;<span class="selectEle eleVAlignM">
                    <select id="jType1" class="eleVAlignM w200">
                        <option value="">选择出资方式</option>
                        <option valur="01">货物</option>
                        <option valur="02">实物</option>
                        <option valur="03">知识产权</option>
                        <option valur="04">债权</option>
                        <option valur="05">高新技术成果</option>
                        <option valur="05">土地使用权</option>
                        <option valur="05">劳权</option>
                        <option valur="06">其他</option>
                    </select></span>&nbsp;&nbsp;<span class="titleText textS12 eleVAlignM">金额</span>&nbsp;<input id="jTypePrice1" name="jTypePrice1" class="textInput w120 eleRadius eleVAlignM" type="text">
            </div>
            <div id="insertFlag" class="eleContainer">
                <input id="" value="增加" onclick="insertJType()" class="commonBtn" type="button"/>
                <input id="" value="删除" onclick="deleteJType()" class="commonBtn" type="button"/>
            </div>
        </div>
    </form>
</div>
<!--dialog-->
</body>
</html>