jquery实例:表格里点击按钮后添加一行,新添加的行附带删除按钮亲测 原创

文章标签: jquery入门实例 table
  • :
  • 03-13 20:03
  • :
  • 45次
  • :
  • 0条
  • 1赞

简介jquery操作表格的一个简单实例,点击按钮后,复制当前行新建一行,并且新建的行里有删除按钮,可删除当前行。

本文站长和大家分享一个简单的jquery实例,通过这个实例来进一步的掌握和学习Jquery的技巧和应用。

假设,我们在web里要实现这样一个功能:

一个表格,每一行都有一个“添加”按钮,点击后,会复制当前行,然后新建一行添加到当前行的后面,并且新添加的行有一个“删除”按钮,点击后可删除当前行。

在站长没有熟练的掌握jquery之前,站长实现这样的一个效果,是这样来做的:

先定义好两个函数,一个是实现“添加”功能,一个是实现“删除”功能;

然后在表格里的按钮上,通过“onclick=函数名”,把上面定义好的函数绑定到按钮上;

但在了解了jquery里的“预添加”功能后,[可参考这篇文章:jquery里给未来元素[动态添加的元素]绑定事件的方法],要实现这个功能,仅仅需要两行的代码就行:

$("table#aijquery").on("click","button.addtr",function(){
	var $tr=$(this).closest("tr");
  	$tr.after($tr.clone());
});
$("table#aijquery").on("click","button.deltr",function(){
	var $tr=$(this).closest("tr");
  	$tr.remove();
});
//本文原创:爱jQuery:www.aijquery.cn

上面源码,解释一下就是:

为ID为aijquery的table表格绑定一个“click”点击事件,当触发这个事件的标签是button.addtr,也就是带有addtr样式的button按钮时,开始执行函数里的操作。

因为事件是绑定在表格上的,所以表格里的按钮,不管是已经存在的,还是后来添加的,当被点击时都会触发相关的操作,这就是jquery里为“未来元素”添加操作,也就是我们所说的“预添加”功能的实现方法。

上面的源码,站长是把添加功能和删除功能分开写的,其实我们可以写在一句代码里:

$("table#aijquery").on("click","button",function(){
	var $tr=$(this).closest("tr");
  	if($(this).hasClass("addtr")){
  	   $tr.after($tr.clone()); 
  	};
  	if($(this).hasClass("deltr")){
  	   $tr.remove();
  	};
});

好了,就是这么的简单,希望这个实例,可以帮助到所有看到这篇文章的朋友们!

下面是具体的在线实例演示:jquery操作操作,点击添加一行或删除当前行的在线演示



您正在找的文章可能是: