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 ...
随机推荐
- pip error: command 'gcc' failed with exit status 1
SWIG/_m2crypto_wrap.c:127:20: 致命错误:Python.h:没有那个文件或目录 #include <Python.h> ...
- Oracle- 表查询
这些都比较基础,还是重温一下. 一.简单的查询语句1.查询表结构sql>desc dept; (使用PL/SQL Developer查询时,必需在命令窗口才能使用该语句) 2.查询所有列sql& ...
- Sql Server 带参数的存储过程执行方法
Sql Server 带参数的存储过程执行方法 Visual C# 动态操作 SQL Server 数据库实例教程(4):带参数的存储过程执行方法 上一篇文章介绍了带参数的SQL语句执行方法和不带参数 ...
- Objective-C中的Block(闭包) (轉載)
来源: 伯乐在线 - 青玉伏案 链接:http://ios.jobbole.com/83229/ 学习OC有接触到一个新词Block(个人感觉又是一个牛气冲天的词),但不是新的概念,不是新的东西.学过 ...
- iOS新特性引导页
有一个注意点: 获取版本号 个叫做Version,一个叫做Build,这两个值都可以在Xcode 中选中target,点击"Summary"后看到. Version在plist文件 ...
- 【M12】了解“抛出一个exception”与“传递一个参数”或“调用一个虚函数”之间的差异
1.方法参数的声明语法和catch语句的语法是一样的,你可能会认为主调方法调用一个方法,并向其传递参数,与抛出一个异常传递到catch语句是一样的,是的,有相同之处,但也有更大的不同. 2.主调方法调 ...
- CMake 命令行设定编译环境
笔者电脑安装了两个版本的VS(VS2012 和 VS2010),在使用CMake编译的时候,如果只在对应目录的命令行输入 "cmake .." 则系统会自动选择使用新版本(VS2 ...
- android自动化测试中hierarchyviewer和uiautomatorviewer获取控件信息的方式比对
http://blog.csdn.net/itfootball/article/details/21777835 http://blog.csdn.net/chenbang110/article/de ...
- 【剑指Offer学习】【面试题55:字符流中第一个不反复的字符】
题目:请实现一个函数用来找出字符流中第一个仅仅出现一次的字符. 举例说明 比如,当从字符流中仅仅读出前两个字符"go"时.第一个仅仅出现一次的字符是'g'.当从该字符流中读出前六个 ...
- 汽车OBD2诊断程序开发 (原文转载,思路很清晰!)
1.因TL718已经为你建立了物理层.数据链层和部分应用层的协议,所以只要OBD2标准应用层协议文本,ISO15031-5 或 SAE J1979(这两个协议是相同的内容). 2.TL718诊断 ...