复制最后一个表格行，但更改jquery中的类 [英] Duplicate last table row but change class in jquery

问题描述

我有以下问题。

我有一个表格，就像下面的例子。该计划是复制一行，但不是与一个新的类。该班级应该在删除班级中更改。 jsfiddle中的示例： http://jsfiddle.net/klaas3/wgRYR/ 目标是保持

 < table class =test> 
< thead> 
< tr> 
< td>标题1< / td> 
< td>标题2< / td> 
< td>标题3< / td> 
< td>标题4< / td> 
< / tr> 
< / thead> 
< tbody> 
< tr class =1> 
< td>资料1< / td> 
< td>资料2< / td> 
< td>资料3< / td> 
< td class =remove>< / td> 
< / tr> 
< tr class =2> 
< td>资料1< / td> 
< td>资料2< / td> 
< td>资料3< / td> 
< td class =remove>< / td> 
< / tr> 
< tr class =new> 
< td>资料1< / td> 
< td>资料2< / td> 
< td>资料3< / td> 
< td class =new>< / td> 
< / tr> 
< / tbody> 
  

我使用最后一列与新的和删除类或红色和绿色）作为一个按钮。

我有以下allready，但似乎出错：

  $（table.test tr.new:last td.new）。click（function（）{
 $（'table。 （'new'）。addClass（'remove'）。fadeIn（fast）; 
 $（'table.test tr.new'last'） .clone（true）.insertAfter（'table.test tr.new:last'）; 
}）; 
  

请注意，我不是一个非常有经验的jquery用户。另外，当单元格类改变时，我将更改表格行类以及db id。 （但是，我会尝试自己的一个工作示例）。

>

您需要在更改类之前克隆元素

另外，要关闭/移除click事件处理程序，请使用。off（）

  $（table.test tr.new:last td.new）。click（function（）{
 var x = $（'table.test tr.new:last'）。clone（ true）; 
 //你可以使用this而不是$（'table.test tr.new:last td.new'），因为你在它的事件处理函数
 $（this）.removeClass （'new'）。addClass（'remove'）。off（'click'）; //<  - 从当前td 
中删除处理程序x.insertAfter（'table.test tr.new:last'） ; 
}）; 
  

http://jsfiddle.net/XvDBC/

I have the following question.

I have a table, like the example below. The plan is to copy a row but not with a new class. The class should change in a remove class. Example in jsfiddle: http://jsfiddle.net/klaas3/wgRYR/ The goal is to keep the last row always green and the others red.

<table class="test">
<thead>
    <tr>
        <td>header 1</td>
        <td>header 2</td>
        <td>header 3</td>
        <td>header 4</td>
    </tr>
</thead>
<tbody>
    <tr class="1">
        <td>data 1</td>
        <td>data 2</td>
        <td>data 3</td>
        <td class="remove"></td>
    </tr>
    <tr class="2">
        <td>data 1</td>
        <td>data 2</td>
        <td>data 3</td>
        <td class="remove"></td>
    </tr>
    <tr class="new">
        <td>data 1</td>
        <td>data 2</td>
        <td>data 3</td>
        <td class="new"></td>
    </tr>
</tbody>

I use the last column(with the new and remove class or red and green colors) as a button.

I have the following allready, but something seems to go wrong:

$("table.test tr.new:last td.new").click(function(){
$('table.test tr.new:last  td.new').removeClass('new').addClass('remove').fadeIn("fast");
$('table.test tr.new:last').clone(true).insertAfter('table.test tr.new:last');
});

Mind you, I am not a very experienced jquery user. Also when the cell class is changed I will change the table row class as well with a db id. (But that I will try myself with a working sample).

解决方案

EDIT:

You need to clone the element before changing the classes

Also to turn off/remove the click event handler use .off()

$("table.test tr.new:last td.new").click(function(){
    var x = $('table.test tr.new:last').clone(true);
    // you can use "this" instead of $('table.test tr.new:last  td.new') since you are inside it's event handler
    $(this).removeClass('new').addClass('remove').off('click');// <-- removes handler from current td 
    x.insertAfter('table.test tr.new:last');
});​

http://jsfiddle.net/XvDBC/

这篇关于复制最后一个表格行，但更改jquery中的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！