• jquery动态插入行


    这是一个利用jquery动态插入输入内容的代码。

    html代码:

    <div title="分表2" class="ui-edit" style="padding:20px;" >
    <div id="optionContainer" class="ftitle">经验实体信息(必填,多个网商店铺需加行)</div>
    <div id="option0" class="ui-edit" style="padding-top:5px">
    <div class="fitem">
    <label>经营网店名称:</label>
    <input class="easyui-validatebox" type="text" name="shopName0" data-options="required:true,validType:'length[1,100]'">
    <label>所属电商平台名称:</label>
    <input class="easyui-validatebox" type="text" name="platformName0" data-options="required:true,validType:'length[1,100]'">
    <label>网店级别(仅限淘宝及天猫商户):</label>
    <input class="easyui-validatebox" type="text" name="shopLevel0" data-options="required:true,validType:'length[1,100]'">
    <label>网店持续经营年限:</label>
    <input class="easyui-validatebox" type="text" name="operatingPeriod0" data-options="required:true,validType:'length[1,100]'">
    </div>
    <div class="fitem">
    <label>网店实际所有者(个人名称或公司名称):</label>
    <input class="easyui-validatebox" type="text" name="shopOwner0" data-options="required:true,validType:'length[1,100]'">
    <label>子帐号:</label>
    <input class="easyui-validatebox" type="text" name="subAccount0" data-options="required:true,validType:'length[1,100]'">
    <label>密码:</label>
    <input class="easyui-validatebox" type="text" name="sbuPassword0" data-options="required:true,validType:'length[1,100]'">
    <label>主营业务及主要产品、品牌:</label>
    <input class="easyui-validatebox" type="text" name="businessOpera0" data-options="required:true,validType:'length[1,200]'">
    </div>
    <div class="fitem">
    <label>经营地址(如有):</label>
    <input class="easyui-validatebox" type="text" name="businessAddress0" >
    <label>仓库地址:</label>
    <input class="easyui-validatebox" type="text" name="warehouseAddress0" >
    <label>经营实体上年度销售/营业收入:</label>
    <input class="easyui-validatebox" type="text" name="salesIncome0" data-options="required:true,validType:'length[1,100]'">
    <label>经营实体总负债:</label>
    <input class="easyui-validatebox" type="text" name="totalLiability0" data-options="required:true,validType:'length[1,100]'">
    </div>

    <div class="fitem">
    <label>银行负债:</label>
    <input class="easyui-validatebox" type="text" name="bankLiabilities0" data-options="required:true,validType:'length[1,100]'">
    <label>上年度净利润:</label>
    <input class="easyui-validatebox" type="text" name="netProfit0" data-options="required:true,validType:'length[1,100]'">

    </div>
    <br />
    <div style="text-align:center;">
    <a href="#" onclick="addRow()">添加一行</a>
    </div>
    </div>
    </div>

    javascript代码:

    //添加行
    function addRow(){
    rowCount++;
    var newRow='<br/><div id="option'+rowCount+'"class="ui-edit" style="padding-top:5px"><div class="fitem">'+
    '<label>经营网店名称:</label><input class="easyui-validatebox" type="text" name="shopName'+rowCount+'">'+
    '<label>所属电商平台名称:</label><input class="easyui-validatebox" type="text" name="platformName'+rowCount+'"><label>网店级别(仅限淘宝及天猫商户):</label><input class="easyui-validatebox" type="text" name="shopLevel'+rowCount+'"><label>网店持续经营年限:</label><input class="easyui-validatebox" type="text" name="operatingPeriod'+rowCount+'"></div>'+
    '<div class="fitem"><label>网店实际所有者(个人名称或公司名称):</label><input class="easyui-validatebox" type="text" name="shopOwner'+rowCount+'"><label>子帐号:</label> <input class="easyui-validatebox" type="text" name="subAccount'+rowCount+'"><label>密码:</label> <input class="easyui-validatebox" type="text" name="sbuPassword'+rowCount+'"><label>主营业务及主要产品、品牌:</label><input class="easyui-validatebox" type="text" name="businessOpera'+rowCount+'"></div>'+
    '<div class="fitem"><label>经营地址(如有):</label><input class="easyui-validatebox" type="text" name="businessAddress'+rowCount+'" ><label>仓库地址:</label><input class="easyui-validatebox" type="text" name="warehouseAddress'+rowCount+'" ><label>经营实体上年度销售/营业收入:</label><input class="easyui-validatebox" type="text" name="salesIncome'+rowCount+'"><label>经营实体总负债:</label> <input class="easyui-validatebox" type="text" name="totalLiability'+rowCount+'"></div>'+
    '<div class="fitem"><label>银行负债:</label> <input class="easyui-validatebox" type="text" name="bankLiabilities'+rowCount+'" ><label>上年度净利润:</label><input class="easyui-validatebox" type="text" name="netProfit'+rowCount+'"></div>'+
    '<br /><div style="text-align:center;"><a href="#" onclick=delRow('+rowCount+')>删除</a></div></div>';

    //var newRow='<tr id="option'+rowCount+'"><td class="oz-form-topLabel">选项'+rowCount+':</td><td class="oz-property" ><input type="text" style="300px"></td><td><a href="#" onclick=delRow('+rowCount+')>删除</a></td></tr>';

    $('#optionContainer').append(newRow);
    $('#rowCount').val(rowCount);
    }
    //删除行
    function delRow(rowIndex){
    $("#option"+rowIndex).remove();
    rowCount--;
    $('#rowCount').val(rowCount);
    }

  • 相关阅读:
    字节流与字符流,字节流和字符流的使用哪个多?
    java 读写操作大文件 BufferedReader和RandomAccessFile
    hibernate官网文档
    阿里云centos怎么用xshell5登陆
    STM8L使用外部8M HSE
    vscode函数注释添加【转载】
    某个通信的异常判断存在于两个任务中时计算通信超时的一种思路
    STM32F0芯片读保护
    FrameworkCubeMX.gpdsc missing的问题
    git忽略已经提交的文件【转载】
  • 原文地址:https://www.cnblogs.com/xuanaiwu/p/6034475.html
Copyright © 2020-2023  润新知