你的位置:首页 > Java教程

[Java教程]点击按钮添加或者删除一行实例代码


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

 

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>点击按钮添加或者删除一行-蚂蚁部落</title><script type="text/javascript" src="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/