删除按钮ajax案例,jquery实例：表格里点击按钮后添加一行，新添加的行附带删除按钮...

jquery实例：表格里点击按钮后添加一行，新添加的行附带删除按钮

文章标签: jquery入门实例 table

:

03-13 20:03

:

665次

:

0条

1赞

点赞

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

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

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

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

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

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

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

但在了解了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();

};

});

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

您正在找的文章可能是：