如何附加新的< tr>在当前< tr> [英] How to append new <tr> after current <tr>

问题描述

我有以下表格结构。

 < table> 
< tr> 
< td>< a href =＃>< / td> 
< / tr> 
< / table> 
  

当我点击< a> 我想在< tr> 旁边添加新的< tr> ，其中< ;> 被点击。

所以结果是：

 <表> 
< tr> 
< td>< a href =＃>< / td> 
< / tr> 
< tr> 
< td>< a href =＃>< / td> 
< / tr> 
< / table> 
  

解决方案

示例：

  $（'a'）。bind（'click'，function（）{
 $（'< tr>< td> new td< /td></tr>').insertAfter($(this).closest('tr'））; 
}）; 
  

如果您想创建一个克隆使用：

  $（'a'）。live（'click'，function（）{
 var $ this = $（this），
 $ parentTR = $ this.closest（'tr'）; 
 
 $ parentTR.clone（）。insertAfter（$ parentTR）; 
}）; 
  

示例链接： http://www.jsfiddle.net/7A6MQ/

基本上，您可以从 tr元素（其中包括子节点）并在该元素后插入该副本。因此，您需要 .live 绑定来确保新创建的 a 元素也可以调用该点击处理程序。 / p>

参考： .clone（）， .insertAfter（），。live（）

I have following table structure.

<table>
    <tr>
        <td><a href="#"></td>
    </tr>
</table>

When I click on <a> I want to add new <tr> next to <tr> of which <a> is clicked.

So the result will be:

<table>
    <tr>
        <td><a href="#"></td>
    </tr>
    <tr>
        <td><a href="#"></td>
    </tr>
</table>

解决方案

Example:

$('a').bind('click', function(){
  $('<tr><td>new td</td></tr>').insertAfter($(this).closest('tr'));
});

If you want to create a clone use:

$('a').live('click', function(){
  var $this     = $(this),
      $parentTR = $this.closest('tr');

  $parentTR.clone().insertAfter($parentTR);
});

Example link: http://www.jsfiddle.net/7A6MQ/

Basically, you create a copy from the tr element (which includes child nodes) and insert that copy after that element. Therefore, you need the .live binding to make sure that newly created a elements do also invoke that click handler.

Ref.: .clone(), .insertAfter(), .live()

这篇关于如何附加新的< tr>在当前< tr>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！