jquery动态插入行,不用拼写html,简洁版
这个一个利用jquery实现动态插入输入行效果小功能,不用在javascript里拼写html字符串,更简洁、高效。
html代码:
<div class="fitem">
<table id="tblData">
<tr>
<td>保证人姓名</td>
<td>证件号码</td>
<td>工作单位</td>
<td>职务</td>
<td>联系电话</td>
<td>婚姻状况</td>
<td>家庭地址</td>
<td>月收入情况</td>
<td>资产总额</td>
<td>负债总额</td>
</tr>
<tr id="tRow0">
<td>
<input id="guaranterName" name="guaranterName" style="width:89px">
</td>
<td>
<input id="guaranterCard" name="guaranterCard" style="width:89px">
</td>
<td>
<input id="guaranterEmployer" name="guaranterEmployer" style="width:89px">
</td>
<td>
<input id="guaranterDuties" name="guaranterDuties" style="width:89px">
</td>
<td>
<input id="guaranterPhone" name="guaranterPhone" style="width:89px">
</td>
<td>
<select id="guaranterMaritalStatus" name="guaranterMaritalStatus" style="width:89px">
<option value=""></option>
<option value="已婚">已婚</option>
<option value="未婚">未婚</option>
<option value="离异">离异</option>
<option value="丧偶">丧偶</option>
<option value="其他">其他</option>
</select>
</td>
<td>
<input id="guaranterHouseAddress" name="guaranterHouseAddress" style="width:89px">
</td>
<td>
<input id="guaranterMonthlyIncome" name="guaranterMonthlyIncome" style="width:89px">
</td>
<td>
<input id="guaranterValues" name="guaranterValues" style="width:89px">
</td>
<td>
<input id="guaranterTotalLiabilities" name="guaranterTotalLiabilities" style="width:89px">
</td>
</tr>
</table>
<br />
<div style="text-align:center;">
<a href="#" onclick="addGuaranterRow()">添加一行</a>
</div>
</div>
javascript代码:
//添加行
function addGuaranterRow(){
var num=$("#guaranterRowCount").val();
num=parseInt(num);
num++;//点击自加
var str='<td><a href="#" onclick=delGuaranterRow('+num+')>删除</a></td>';
$("#tRow0").clone(true).attr("id","tRow"+num).appendTo("#tblData");
$("#tRow"+num+"td").each(function(){
$(this).find("input[type='text']").val("");//清空数据
$(this).find("input[name='guaranterName']").attr("id","guaranterName"+num).attr("name","guaranterName"+num);
$(this).find("input[name='guaranterCard']").attr("id","guaranterCard"+num).attr("name","guaranterCard"+num);
$(this).find("input[name='guaranterEmployer']").attr("id","guaranterEmployer"+num).attr("name","guaranterEmployer"+num);
$(this).find("input[name='guaranterDuties']").attr("id","guaranterDuties"+num).attr("name","guaranterDuties"+num);
$(this).find("input[name='guaranterPhone']").attr("id","guaranterPhone"+num).attr("name","guaranterPhone"+num);
$(this).find("input[name='guaranterMaritalStatus']").attr("id","guaranterMaritalStatus"+num).attr("name","guaranterMaritalStatus"+num);
$(this).find("input[name='guaranterHouseAddress']").attr("id","guaranterHouseAddress"+num).attr("name","guaranterHouseAddress"+num);
$(this).find("input[name='guaranterMonthlyIncome']").attr("id","guaranterMonthlyIncome"+num).attr("name","guaranterMonthlyIncome"+num);
$(this).find("input[name='guaranterValues']").attr("id","guaranterValues"+num).attr("name","guaranterValues"+num);
$(this).find("input[name='guaranterTotalLiabilities']").attr("id","guaranterTotalLiabilities"+num).attr("name","guaranterTotalLiabilities"+num);
});
$("#guaranterRowCount").val(num);//重新赋值
$("#tRow"+num).append(str);
}
//删除行
function delGuaranterRow(rowIndex){
var num=$("#guaranterRowCount").val();
num=parseInt(num);
if(rowIndex>0&&num>0){//判断是不是第一行
$("#tRow"+rowIndex).remove();
num--;//删除后要自减
$('#guaranterRowCount').val(num);
}else{
alert("这是第一行了!");
}
}
jquery动态插入行,不用拼写html,简洁版的更多相关文章
- jquery动态插入行
这是一个利用jquery动态插入输入内容的代码. html代码: <div title="分表2" class="ui-edit" style=" ...
- 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元素,那么删除后的东西都将自动替换,这样应该是有问题的,建议楼主改进!",故 ...
- java使用poi操作word, 支持动态的行(一个占位符插入多条)和表格中动态行, 支持图片
依赖 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifa ...
- 动态插入、添加删除表格行的JS代码
<html> <head> <title>Table对象的方法</title> <script language="JavaScript ...
- iOS_动态插入或删除行
终于效果图: 分MVC三层设计;自己定义的Cell有两种;一种是MainCell,由ModelArr提供数据源;还有一种是插入的cell,由代码创建,而且由另外一个数组供状态数据 数据源部分: wat ...
- 给Jquery动态添加的元素添加事件
给Jquery动态添加的元素添加事件 来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经 被新元素的事件绑 ...
随机推荐
- Java---replace与replaceAll的区别
乍一看,字面上理解好像replace只替换第一个出现的字符(受javascript的影响),replaceall替换所有的字符,其实大不然,只是替换的用途不一样. 这两者很容易搞混,在这里详细讲述下. ...
- [CODEVS2055]集合划分
对于从1到N(1<=N<=3)的连续整数集合,划分成两个子集合,使得每个集合的数字之和相等.举个例子,如果N=3,对于{1,2,3}能划分成两个子集合,他们每个的所有数字和是相等的:{3} ...
- vmware 收缩硬盘大小(compat,shrink,vmware-vdiskmanager)
3.vmware-vdiskmanager 虚拟机在使用过程中,虚拟磁盘的大小会不断变大.即使你删除了磁盘中的文件,虚拟磁盘的大小仍然不会缩小.VMWare在VMWare Tools中推出了Shrin ...
- phonegap与微信开放平台接口整合
在开发phonegap应用的过程中有个需求需要将应用的消息推送到微信上.于是我自己写了一个微信的phonegap插件,并成功整合进了应用. 插件地址:https://github.com/ajccom ...
- 选择服务器OS标准
稳定性.可靠性.兼容性.高效率.可持续,五大标准; recommend always using the stable version for production environments http ...
- mahout算法源码分析之Collaborative Filtering with ALS-WR (四)评价和推荐
Mahout版本:0.7,hadoop版本:1.0.4,jdk:1.7.0_25 64bit. 首先来总结一下 mahout算法源码分析之Collaborative Filtering with AL ...
- bash shell——与if条件相关的参数意义
最近编写脚本,常看到有 if [ -x $variable ] 类的条件语句,不知道相应参数的意义到底是什么, 特摘录如下:from http://blog.csdn.net/aaaaatiger ...
- wxPython中添加窗口标题图标
这种添加方法可以避免要将应用程序和图标放在同一个目录,可以实现从模块中读取图标 #用于从module中读取ico,避免了要在程序所在路径附上此ico exeName = win32api.GetMod ...
- react native web
http://rawgit.com/taobaofed/react-web/master/pages/uiexplorer.html#/scene_1?_k=7vm99j
- oracle在敏感操作前创建还原点
我们都知道,在vmware虚拟机中有一个拍摄快照的功能,我们可以把系统此时的状态保存下来,一方后面遇到不测事件,也好将系统还原,oracle中也有类似功能. 首先创建一张学生表: 向学生表中插入一条数 ...