JS-Jquery兑现动态的add和delete<input type="text">
日期：2014-05-16 浏览次数：20349 次
<!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>
