星空网 > 软件开发 > Java

点击按钮添加或者删除一行实例代码

点击按钮添加或者删除一行实例代码:
网站在填写表达的时候又很多的选择空间,甚至可以自行添加需要添加的内容,例如可以点击按钮添加一个表达项,如果不需要的话可以点击一个按钮删除,下面就简单介绍一下如何实现此效果。
代码实例如下:

 

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>点击按钮添加或者删除一行-蚂蚁部落</title><script type="text/javascript" src='/images/loading.gif' data-original="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript">$(function(){ var show_count=20; var count=$("input:text").val(); var fin_count=0;  $("#btn_addtr").click(function(){  fin_count=$("tr").length-1  if(fin_count<show_count)  {   $("tr:eq(1)").clone().appendTo("table");   $("tr:last td input:first").val(++count);  } });});function deltr(obj){ var length=$("tr").length; if(length<=2) {  alert("至少保留一行"); } else {  $(arguments[0]).parent().parent().remove(); }}</script></head><body><input type="button" id="btn_addtr" value="增行"><table id="dynamicTable" width="700" border="0" cellspacing="0" cellpadding="0"> <tr>  <td height="30" align="center" bgcolor="#CCCCCC">ID</td>  <td align="center" bgcolor="#CCCCCC">用户名</td>  <td align="center" bgcolor="#CCCCCC">类型</td>  <td align="center" bgcolor="#CCCCCC">其他</td>  <td></td> </tr> <tr>  <td height="30" align="center"><input type="text" size="2" value="1" /></td>  <td align="center"><input type="text" name="username" /></td>  <td align="center"><select name="type">    <option value="1">管理员</option>    <option value="2">用户</option>   </select></td>  <td align="center"><input type="text" name="username2" /></td>  <td><input type="button" value="删行" onclick="deltr(this)" /></td> </tr></table></body></html>

 

以上代码实现了我们想要的效果,能够删除和或者添加行,下面介绍一下实现过程。
一.实现原理:
原理比较简单,当点击添加按钮的时候,会使用appendTo()函数为table添加一行,当点击删除按钮的时候,能够将当前按钮父元素的父元素删除,其实删除的就是按钮所在的当前行,具体可以参阅代码注释。
二.代码注释:
1.$(function(){}),当文档结构完全加载完毕之后再去执行函数中的代码。
2.var show_count=20,声明一个变量并赋值,用来规定最大的行数。
3.var count=$("input:text").val(),第一个文本框的value属性值,也就是第一个id值。
4.var fin_count=0,声明一个变量并赋初值为0。
5.$("#btn_addtr").click(function(){}),为添加按钮注册click事件处理函数。
6.fin_count=$("tr").length-1,将当前除去标题行之外的总行数赋值给变量fin_count。
7. if(fin_count<show_count),判断当前的除去标题行的总行数是否小于规定的行数。
8.$("tr:eq(1)").clone().appendTo("table"),克隆第一行并将其追加到表格的尾部。
9.$("tr:last td input:first").val(++count);,设置行的id。
10.function deltr(obj){},此函数用来删除一行,参数是传递的一个对象。
11.var length=$("tr").length,获取总行数。
12.if(length<=2){alert("至少保留一行")},如果总行数小于等于2,则弹出提示。
13.$(arguments[0]).parent().parent().remove();,删除当前按钮父元素的父元素,也就是当前行。
特别注意:arguments[0]是函数传递的第一个参数,也就是按钮对象this。
三.相关阅读:
1.$("input:text")可以参阅jQuery的:text选择器一章节。
2.val()函数可以参阅jQuery的val()方法一章节。  
3.$("tr:eq(1)")可以参阅jQuery的:eq()选择器一章节。
4.clone()函数可以参阅jQuery的clone()方法一章节。 
5.appendTo()函数可以参阅jQuery的appendTo()方法一章节。 
6.$("tr:last td input:first")可以参阅jQuery的:last选择器和jQuery的:first选择器一章节。 
7.arguments可以参阅javascript的arguments对象一章节。
8.parent()函数可以参阅jQuery的parent()方法一章节。
9.remove()函数可以参阅jQuery的remove()方法一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=10596

更多内容可以参阅:http://www.softwhy.com/jquery/

 




原标题:点击按钮添加或者删除一行实例代码

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

国际建材:https://www.goluckyvip.com/tag/11473.html
跨境ecome:https://www.goluckyvip.com/tag/11474.html
家电电商:https://www.goluckyvip.com/tag/11475.html
供应链品控:https://www.goluckyvip.com/tag/11476.html
事半功倍:https://www.goluckyvip.com/tag/11477.html
脸书:https://www.goluckyvip.com/tag/11478.html
重庆品胜科技与星苹台达成合作 助力部队现代化后勤建设 :https://www.kjdsnews.com/a/1836523.html
回乡创业,不知道干什么,能否推荐几个农村老家创业的好项目?:https://www.vstour.cn/a/365177.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流