<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JS-demo01.html:JS动态的添加和删除</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.3.2.js"></script>
<script type="text/javascript">
/*
*@author Roin.li
*@time 2012-02-15 12:16:00
*@decription <input type="text">实现动态的js"添加","删除"
*/
function toFpcyAdd(){// 添加
//var trSize = $("#fpcyTable").find("tr:gt(2)").size();
var trSize = $("#fpcyTable").find("tr:gt(2)").length;
if(trSize >= 5){
alert("添加数据不能超过5条");
return;
}
$("#fpcyTable").find("tr:eq(3)").clone(true).appendTo($("#fpcyTable")).find("input[type='text']").val("").end().find("td:eq(0)").text(trSize + 1).end().find("input:eq(0)").focus();
}
function toFpcyDelete(obj){// 删除
debugger;
var $objparents = $(obj).parents("tr:eq(0)"); // parents的祖先元素是? 是table吗? 不是，看错了，input后面还有个td呢，td之后是tr,所以tr是祖先元素
var textvalue = $objparents.find("td:eq(0)").text();
var trsize = $("#fpcyTable tr:gt(2)").size();
if(trsize > 1){
$objparents.nextAll("tr").each(function(index,item){
$(item).find("td:eq(0)").text(textvalue - 0 + index);
})
$objparents.remove();
}
//alert(111);
//var textValue = $(this).find("tr:eq(0)").text
//alert(textValue);
}
</script>
</head>
<body>
<table class="commandTable" cellspacing="0px" id="fpcyTable">
<tr><td class="mb_tit_1" colspan="5"></td></tr>
<tr><td class="tableCaption" colspan="5">查验条件列表</td></tr>
<tr><td class="tableTitle" align="center">序号</td><td class="tableTitle">发票代码</td><td class="tableTitle">发票号码</td><td class="tableTitle">操作</td></tr>
<tr>
<td class="td_02">1</td>
<td class="td_02"><input type="text" size="20" name="nfpdm"/></td>
<td class="td_02"><input type="text" size="20" name="nfphm"/></td>
<td class="td_02"><a href="javascript:void(0)"><input type="button" id="toFpcyDelete" value="删除" onclick="toFpcyDelete(this)"/><!-- <img title="删除" alt="删除" src="<c:out value="${pageContext.request.contextPath}"/>/images/table/docdelete.gif" border="0" onclick="javascript:gotoDelete(this);" /> --></a></td>
</tr>
</table>
<table><tr><td><input type="button" id="toFpcyAdd" value="添加" onclick="toFpcyAdd()"/></td></tr></table>
</body>
</html>
分享到：
相关推荐
很实用的方法，刚学的分享下！<script type="text/javascript">
<script type="text/javascript" src="jquery.combo.select.js" ></script> <link rel="stylesheet" href="combo.select.css" /> </head> <body> <select name="table_id" id="table_id"> <option value="">-...
先看一下简单的效果 ... <div class=layui-input-inline> <select name=city lay-filter=province> <option xss=removed></option> <option value=11>北京市</option> <option value=12>天津市</o
<script src="js/jquery-1.11.2.min.js"></script> <script src="js/labelauty.js"></script> 引用css <!--引用css--> <link href="css/labelauty.css" rel="stylesheet" /> html代码 <!--html代码--> <!--单选-->...
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script> <script type="text/javascript" src="js/jquery-...
<table align="center" style="margin-top:200px;"> <tr> <td> <!-- 左边选择框 --> ... <input type="button" id="toRightBtn" value="选中的右移"/><br/> <input type="button" id="toRi
<script src="./js/jquery.validate.unobtrusive.js"></script> </head> <body> <form action="test.do" method="POST" novalidate="novalidate"> <div> <input type="text" id="name" name="name" placeholder=...
<script type="text/javascript" src="floatAd.js"></script> <script type="text/javascript"> $(function(){ //调用漂浮插件 $("body").floatAd({ imgSrc : "<%=host%>/***.jpg", url:"<%=host%>/*** })...
<!DOCTYPE html> <html lang="zh"> <head><title>2022 Happy New Year! ! ! !</title></head> ... <script type="text/javascript" src="js/jquery.fireworks.js"></script> <script type="text/ja
<p>Date: <input type="text" id="datepicker"></p> </div><!-- End demo --> <div class="demo-description"> <p>The datepicker is tied to a standard form input field. Focus on the input (click, or use ...
<script type="text/javascript" src="jquery-1.8.0.min.js"></script> </head> <body> <form action="a2.php" name="form1" method="post"> 姓名：<input type="text" name="username" value="wjj"> 年龄：<input ...
<script language="javascript" type="text/javascript" src="js/jquery-1.4.2.js"></script> <script language="javascript" type="text/javascript" src="js/lrtk.js"></script> </head> <body> <!-- 代码 开始 --...
--<script src="js/jquery.fullPage.min.js"></script>--> <script> $(function() { $('#dowebok').fullpage(); }); </script> </head> <body> <div id="dowebok"> <div class="section ...
<label>及格分数</label> <input type="text" id="PassScore" mstype="1" msg="及格分数" fmt="float"> <span>分</span> </div> * 解释：input id 为必有项， mstype="1":标识该输入框为需要校验 msg=...
<script type="text/javascript" src="/scripts/jquery-1.4.1.min.js"></script> <script type="text/javascript" src="/scripts/csdn.js?v=1.1"></script> </head> <body> <script src="/scripts/pub_topnav_...
<div class="showcase main-showcase"> <button class="control-button bordered make-it-fail">Make it fail</button> <button class="loading-button circular-loading top">Send</button> <button class=...
<div id="pr-slider" class="dragdealer"> <div class="stripe"> <div id="green-highlight"></div> <div id="orange-highlight"></div> <div id="blue-highlight"></div> <div class="handle"> <div ...
<li><strong>用户名：</strong><input class="ipt" type="text" name="log" value="lanrenzhijia" size="20" /></li> <li><strong>密码：</strong><input class="ipt" type="password" name="pwd" value="***" ...
<script type="text/javascript" src="js/jquery-132min.js"></script> <script type="text/javascript" src="js/uploadPreview.js"></script> <script type="text/javascript"> $(document).ready(function()...
<script src="scripts/jquery-1.5.1.min.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ var $alltext = $("#form1 :text"); var $...