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="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动态插入行的更多相关文章
- jquery动态插入行,不用拼写html,简洁版
这个一个利用jquery实现动态插入输入行效果小功能,不用在javascript里拼写html字符串,更简洁.高效. html代码: <div class="fitem"&g ...
- Jquery动态插入table行
想在一个<table id="table1"></table>标签中动态的插入行,在jquery中可以这样做: $("#table1") ...
- jquery 动态添加表格行
jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...
- Jquery 动态生成表单 并将表单数据 批量通过Ajax插入到数据库
利用Jquery 动态生成 Table 表单 之后利用each 方法来遍历所有文本框获取文本的value值 并通过Ajax 将数据 提交到Web服务里把数据插入数据库 Html页面 <!DOC ...
- jQuery实现表格行的动态增加与删除(改进版)
之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子,有些人评论说"如果表格中是input元素,那么删除后的东西都将自动替换,这样应该是有问题的,建议楼主改进!",故 ...
- 动态插入、添加删除表格行的JS代码
<html> <head> <title>Table对象的方法</title> <script language="JavaScript ...
- 给Jquery动态添加的元素添加事件
给Jquery动态添加的元素添加事件 来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经 被新元素的事件绑 ...
- Jquery easyui开启行编辑模式增删改操作
Jquery easyui开启行编辑模式增删改操作 Jquery easyui开启行编辑模式增删改操作先上图 Html代码: <table id="dd"> </ ...
- [转]Jquery easyui开启行编辑模式增删改操作
本文转自:http://www.cnblogs.com/nyzhai/archive/2013/05/14/3077152.html Jquery easyui开启行编辑模式增删改操作先上图 Html ...
随机推荐
- 学习和理解C#的委托
去年自学C#用的教程是入门级的<学通C#的24堂课>,教材里面也没有提到委托和事件,工作中也没怎么用到.后来一次在网上看了一些大牛的博客,读完之后感觉懵懵懂懂,似懂非懂,过了两三天之后,却 ...
- webService 接口调用配置
1.配置XML文件,如果新建一个XML文件需要在applicationContext.xm里面配置一下 <import resource="cxf-client.xml" / ...
- go strings 常用的几个函数
fmt.Println(strings.ToUpper("hello world")) //转换为大写 fmt.Println(strings.ToLower("H ...
- hdu 5445 Food Problem 多重背包
Food Problem Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5 ...
- Matplotlib 工具包 使用教程索引
官方文档链接中: http://matplotlib.org/gallery.html 这里给了非常多演示样例图片.能够查看对应源码,是一个非常好学习途径. matplotlib 函数API :函数A ...
- Qualcomm Web Site For Android Development
https://www.codeaurora.org/xwiki/bin/QAEP/release https://support.cdmatech.com/login/ https://chipco ...
- C++和python使用struct传输二进制数据结构来实现
网络编程问题往往涉及二进制数据的传输.在C++经常使用的传输是文本字符串和分组结构. 假设该数据可以预先送入连续的内存区域,然后让send函数来获得的第一个地址,这一块连续的内存区就能完成传输数据.文 ...
- (原)C++解析XML生成类对象_v1.0 函数指针
要写一个xml解析,解析后获得到的数据变成各个类的对象. 解析有现成的库,使用tinyxml,但是解析出来的类库如何变成各个类的对象, 例如一下这个xml, <musics> <mu ...
- 四、Socket之UDP异步传输文件-用控件显示文件传输进度
上一篇文章三.Socket之UDP异步传输文件中,实现了多文件的传输和MD5校验,还显示了文件传输过程中的信息,在这一篇文章中,将介绍怎样实现传输文件的进度显示和实现选择保存文件路径. 首先,来实现一 ...
- MySQL(1):启动MySQL服务,客户端连接服务
1.安装完毕mysql之后,在windows中找到服务,启动MySQL服务(服务端)(mysqld.exe) 2.接下来启动客户端(mysql.exe) 这里参数中: -hlocalhost 表示主机 ...