jquery写的自动增加行

最新推荐文章于 2021-05-30 21:16:51 发布
最新推荐文章于 2021-05-30 21:16:51 发布
阅读量681 收藏 1
点赞数 1
分类专栏： 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/crown_0726/article/details/41889441
版权

本功能是用jquery写的，但是代码中有live方法，因此在引入jquery时候要选择1.9以下的版本。

js代码为：

// JavaScript Document
var addCertifyinfo;
var addCertifyinfoFlag = true;

addCertifyinfo += '<tr height="45px">';
addCertifyinfo += '<td width="100px" bgcolor="#F4F3F3"><font color="#FFA620"> * </font>姓名：</td>';
addCertifyinfo += '<td width="135px"></td>';
addCertifyinfo += '<td width="100px" bgcolor="#F4F3F3"><font color="#FFA620"> * </font>出生年月：</td>';
addCertifyinfo += '<td width="135px"></td>';
addCertifyinfo += '<td width="100px" bgcolor="#F4F3F3"><font color="#FFA620"> * </font>应聘职务：</td>';
addCertifyinfo += '<td width="135px"></td>';
addCertifyinfo += '<td width="100px" bgcolor="#F4F3F3">所在地：</td>';
addCertifyinfo += '<td><a name="news_crewReg_certifySave">保存</a>  <a name="news_crewReg_certifyDelete">删除</a></td>';
addCertifyinfo += '</tr>';
                       
$(document).ready(function() {
	
	$("#news_crewReg_certifyAdd").click(function(){
		if(addCertifyinfoFlag == true){
			$("#news_crewReg_certifyContent").find('tr:first').before(addCertifyinfo);
			addCertifyinfoFlag = false;
		}else{
			alert('每次只能添加一行！');
		}
	});
	$("a[name='news_crewReg_certifyDelete']").live('click',function(){
		$("#news_crewReg_certifyContent").find('tr:first').remove();
		addCertifyinfoFlag = true;
	});
	$("a[name='news_crewReg_certifySave']").live('click',function(){
		$(this).parent().append('<a name="news_crewReg_rertifyReDelete">删除</a>');
		$(this).remove();
		$("a[name='news_crewReg_certifyDelete']").remove();
		addCertifyinfoFlag = true;
	});
	$("a[name='news_crewReg_rertifyReDelete']").live('click',function(){
		$(this).parent().parent().remove();
	});
});

HTML代码为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>公司简介</title>
</head>
<link rel="stylesheet" type="text/css" href="css/crewRegistration.css"/>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/addRows.js"></script>
<body>
	
	<!---------header--------->
    <div style="width:1200px;margin:0 auto;height:2px;background-color:#BCB9BA;"></div>
	<div id="companyInfor">
    	<div id="crewInf_onews_title">
                <div style="float:left;">动态添加行</div>
        </div>
    	<div id="news_crewReg_add">
            <!--持有相关证书-->
            <div class="news_crewReg_baseInfo">
            	<font>动态添加行</font>
            </div>
            <a id="news_crewReg_certifyAdd">
            	新增
            </a>
            <div id="news_crewReg_certifyContent">
            	<table width="100%">
                	<tr height="45px">
                    	<td width="100px" bgcolor="#F4F3F3"><font color="#FFA620"> * </font>姓名：</td>
                        <td width="135px"></td>
                        <td width="100px" bgcolor="#F4F3F3"><font color="#FFA620"> * </font>出生年月：</td>
                        <td width="135px"></td>
                        <td width="100px" bgcolor="#F4F3F3"><font color="#FFA620"> * </font>应聘职务：</td>
                        <td width="135px"></td>
                        <td width="100px" bgcolor="#F4F3F3">所在地：</td>
                        <td></td>
                    </tr>
                    <tr height="45px">
                    	<td bgcolor="#F4F3F3">籍贯：</td>
                        <td></td>
                        <td bgcolor="#F4F3F3">婚姻状况：</td>
                        <td></td>
                        <td bgcolor="#F4F3F3">毕业学校：</td>
                        <td></td>
                        <td bgcolor="#F4F3F3">专业：</td>
                        <td></td>
                    </tr>
                    <tr height="45px">
                    	<td bgcolor="#F4F3F3">学历：</td>
                        <td></td>
                        <td bgcolor="#F4F3F3">毕业日期：</td>
                        <td></td>
                        <td bgcolor="#F4F3F3">外语语种：</td>
                        <td></td>
                        <td bgcolor="#F4F3F3"><font color="#FFA620"> * </font>职务：</td>
                        <td></td>
                    </tr>
                   <tr>
                    	<td bgcolor="#F4F3F3">外语水平：</td>
                        <td></td>
                        <td bgcolor="#F4F3F3"><font color="#FFA620"> * </font>类别：</td>
                        <td></td>
                        <td bgcolor="#F4F3F3"><font color="#FFA620"> * </font>等级：</td>
                        <td></td>
                        <td bgcolor="#F4F3F3">所在地：</td>
                        <td></td>
                    </tr>
                </table>
            </div>
        </div>

    </div>
    <div style="clear:both;"></div>
    <!-----footer------>
</body>
</html>


css代码为：

/*top*/
#companyInfor{
	width:1200px;
	margin:0 auto;
	height:500px;
	background-color:#EEEDED;
}
#crewInf_onews_title{
	width:1000px;
	margin:0 auto;
	padding-top:20px;
	padding-bottom:10px;
	height:35px;
	font-size:24px;
	color:#6F6E6E;
	font-family:"微软雅黑";
}
#news_crewReg_add{
	width:940px;
	margin:0 auto;
	padding:20px 30px;
	background:#FFF;
	font-size:14px;
	color:#0f8dcc;
}
.news_crewReg_baseInfo{
	width:170px;
	height:50px;
	text-align:center;
	color:#fff;
	font-size:16px;
	line-height:50px;
	font-weight:bolder;
	background-color:#0F8DCC;
	margin-top:15px;
	display:inline-block;
	/*圆角方角设置*/
	-webkit-border-radius:5px 5px 0 0;
	-moz-border-radius:5px 5px 0 0;
 	-ms-border-radius:5px 5px 0 0;
 	border-radius:5px 5px 0 0;
}
/*新增证书信息*/
#news_crewReg_certifyAdd{
	width:50px;
	height:30px;
	text-align:center;
	color:#fff;
	font-size:12px;
	line-height:30px;
	font-weight:bolder;
	background-color:#0F8DCC;
	margin-top:15px;
	overflow:hidden;
	display:inline-block;
	margin-left:650px;
	/*圆角方角设置*/
	-webkit-border-radius:5px 5px 0 0;
	-moz-border-radius:5px 5px 0 0;
 	-ms-border-radius:5px 5px 0 0;
 	border-radius:5px 5px 0 0;
}
/**/
#news_crewReg_certifyContent table td{
	text-align:center;
	font-size:16px;
	font-weight:bolder;
	color:#666666;
	line-height:45px;
	border:1px solid #E5E5E5;
}


Cao Lilu
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery应用案例--自动增加行
君醉酒的博客
09-05 2165
使用JQuery实现自动增加行的功能。如下图，输入文本框内输入用户名和密码，点击增加，上方的表格就生成一行包含刚才输入的用户名和密码，并且还有删除本行的按钮。 代码： 用户名 密码 操作 用户名： 密码： $(function
ajax jquery 自动增加行
03-20
NULL 博文链接：https://yutianapple.iteye.com/blog/796630
jquery实现table自动添加行和编辑
12-11
jquery实现table自动添加行和编辑
自动增行代码
majunbo的专栏
12-10 437
 本代码实现了增加行，删除行的功能，可以随意的增加你想要的行数。所有介绍说明都在代码里，因它比较简单。所以在页面上没加注释。            序号      品名      规格      型号      领用数量      实发数量      单价      合计      使用人签字      备注      删除                         
jQuery 数字自增
小羽向前跑
02-26 2640
最终效果 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&amp
jQuery 自动增长的文本输入框实现代码
10-29
为了解决这个问题，我们可以利用JavaScript库jQuery来创建一个自适应大小的文本输入框，即自动增长的文本输入框。 jQuery提供了一个强大的API，允许开发者通过编写插件来扩展其功能。在本例中，我们看到一个名为`...
jQuery图片自动轮播切换展示特效
04-07
jQuery作为一款强大的JavaScript库，提供了丰富的功能和简单易用的API，使得创建图片自动轮播切换展示特效变得非常便捷。本篇文章将详细探讨jQuery实现图片轮播的核心知识点。 首先，我们要理解jQuery的基本用法。...
jQuery自动添加表单项的方法
10-23
主要介绍了jQuery自动添加表单项的方法,涉及jquery中append方法动态添加表单元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
jquery图片自动放大效果
06-10
在本文中，我们将深入探讨如何使用jQuery实现图片自动放大的效果。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在这个"jquery图片自动放大效果"项目中，我们可以...
JQuery实现插入行
05-28
NULL 博文链接：https://eric-gao.iteye.com/blog/640267
JQ 点击自动增加
12-21
jQuery 点击按钮自动增加，和减少.
Jquery实现表格动态增加一行，删除一行.html
05-15
Jquery实现表格动态增加一行，删除一行(最简洁的代码实现)
jquery.dataTables添加自增序号
码码码码码码农的博客
05-08 834
最近要把dataTables表格第一列ID改为自增编号，在网上搜了很久，发现搜到的结果都是用“fnDrawCallback”这个回调函数，但是我试了好几次都不行，不知道为什么，然后自己通过获取当前页码开始值加当前页角标值，最后赋值给第一列实现了这个功能 "fnRowCallback" : function(nRow, aData, iDisplayIndex) { var start = tab...
JQuery实现表格自动增加行，对新行添加事件
热门推荐
apollokk的专栏
07-30 1万+
效果： 一：原始页面
jQuery中动态添加和删除行
chaplinlong的博客
04-28 1173
这里，先看网页代码。<body> <table width="800" border="0" cellspacing="0" cellpadding="0"> <tr bgcolor="#EBE7DC"> <td><input type="checkbox"/></td> <td>姓名</td> <td>性别</td> <td>卡号</td> <td>会
js/jq动态创建表格的行与列
weixin_30287169的博客
04-21 475
之前做了一个项目，需求是能动态创建表格行，动态创建表格的列，度了很多资料，都没有动态创建列的插件，所以自己动手写了一个 需求大概是（下图） 1.动态添加一行、2.动态添加一列，3.删除行、4.删除列，5.复制行，6.表头的选项是可自定义写入，7.表格的数据可后台传入，也可写入，8.提交数据到后台 //html文件（首先写在html文件中写好表格结构代码，后面再把注释掉的html压缩写到j...
html添加行
helloWorld_LHT的博客
02-14 745
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="js/jquery-3.0.0.min.js&qu
自动增加行的表格html,javascript – 在HTML表格的单元格中插入多行
weixin_30320587的博客
05-30 180
我试图使用jquery在HTML表格的单元格中插入行,我想要这样的东西：--------------ID | Sec | Div--------------1 | S1 | D1| S2 | D2| S3 | D3--------------2 | S3 | D3| S4 | D4| S5 | D5--------------这是我到目前为止：function insertRows...
JQuery动态实现table行自增自减
GRJ123
09-15 1631
效果图： 注意：  需要下载jQuery，引用 代码：                     var row_count = 0; $(function () {     $("#but").click(function () {         row_count++;         var tr = ' ';         $("
用html+css+jquery写好看的前端搜索工具页面
最新发布
09-08
比如，可以通过jQuery实现自动补全功能，根据用户输入的关键词提供相关的建议。还可以添加一些筛选条件，使用户可以根据自己的需求对搜索结果进行精确过滤。此外，还可以使用动画效果来增加页面的交互性，比如点击...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值