这是一个利用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="width: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);
}

jquery动态插入行的更多相关文章

  1. jquery动态插入行,不用拼写html,简洁版

    这个一个利用jquery实现动态插入输入行效果小功能,不用在javascript里拼写html字符串,更简洁.高效. html代码: <div class="fitem"&g ...

  2. Jquery动态插入table行

    想在一个<table id="table1"></table>标签中动态的插入行,在jquery中可以这样做: $("#table1") ...

  3. jquery 动态添加表格行

    jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...

  4. Jquery 动态生成表单 并将表单数据 批量通过Ajax插入到数据库

    利用Jquery 动态生成 Table 表单 之后利用each 方法来遍历所有文本框获取文本的value值  并通过Ajax 将数据 提交到Web服务里把数据插入数据库 Html页面 <!DOC ...

  5. jQuery实现表格行的动态增加与删除(改进版)

    之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子,有些人评论说"如果表格中是input元素,那么删除后的东西都将自动替换,这样应该是有问题的,建议楼主改进!",故 ...

  6. 动态插入、添加删除表格行的JS代码

    <html> <head> <title>Table对象的方法</title> <script language="JavaScript ...

  7. 给Jquery动态添加的元素添加事件

    给Jquery动态添加的元素添加事件 来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经 被新元素的事件绑 ...

  8. Jquery easyui开启行编辑模式增删改操作

    Jquery easyui开启行编辑模式增删改操作 Jquery easyui开启行编辑模式增删改操作先上图 Html代码: <table id="dd"> </ ...

  9. [转]Jquery easyui开启行编辑模式增删改操作

    本文转自:http://www.cnblogs.com/nyzhai/archive/2013/05/14/3077152.html Jquery easyui开启行编辑模式增删改操作先上图 Html ...

随机推荐

  1. iOS--消息推送后方法回调情况(简)

    消息推送 工作 --- 消息推送   消息推送 消息推送集成参考友盟 http://dev.umeng.com/push/ios/integration 注意测试环境下,(友盟)设备在手机启动程序的时 ...

  2. FormsAuthentication.GetRedirectUrl 方法

    https://msdn.microsoft.com/zh-cn/library/8a22t5t3(v=vs.80) FormsAuthentication.GetRedirectUrl 方法 .NE ...

  3. 【UML】——为什么要使用UML

    以前一提到UML,就想到了复杂的流程图.很敬佩哪些想想就能画出整个系统的UML图的人,因为他们头脑中有整个软件架构的蓝图,这样在编写实现的时候,就会知道哪个地方改怎么做,哪个地方如何扩展. 而想成为架 ...

  4. Android设计模式系列--原型模式

    CV一族,应该很容易理解原型模式的原理,复制,粘贴完后看具体情况是否修改,其实这就是原型模式.从java的角度看,一般使用原型模式有个明显的特点,就是实现cloneable的clone()方法.原型模 ...

  5. Dev XtraTreeList 学习

    本文转载:http://www.cnblogs.com/VincentLuo/archive/2012/01/06/2313983.html 一.设置载请保留地址http://www.cnblogs. ...

  6. Genymotion中文手册

    目录1.概述 22.特点 22.1最擅长于虚拟Android 22.2高可控性 22.3管理你的设备 22.4从Eclipse中开启虚拟设备 33.要求 33.1操作系统要求 33.2系统硬件要求 3 ...

  7. 汽车行业DMS系统介绍

    http://blog.sina.com.cn/s/blog_55ceb8f30100hdr8.html 1.汽车行业DMS系统功能介绍DMS是Dealer Management System的简称, ...

  8. 用CSS让网页背景图片居中的方法

    网页背景居中的方法有很多种的.这里介绍一些用CSS让背景图片居中的方法. 让背景图片居中的第一个方法是用像素设定,很多都用这种,但是也是最麻烦的: <div style="width: ...

  9. ThinkPHP CURD方法盘点:where方法

    今天来给大家讲下查询最常用但也是最复杂的where方法,where方法也属于模型类的连贯操作方法之一,主要用于查询和操作条件的设置.where方法的用法是ThinkPHP查询语言的精髓,也是Think ...

  10. iOS开发——UI篇OC篇&UITableView多项选择

    UITableView多项选择 自定义cell和取到相应的cell就行了 TableViewCell.h #import <UIKit/UIKit.h> @interface TableV ...