克隆给定表行中的整个 tr 表实体答案

【问题标题】：Cloning the entire tr table entity in a given table row克隆给定表行中的整个 tr 表实体
【发布时间】：2013-06-23 10:34:03
【问题描述】：

我希望能够克隆一个带有 textarea 的表 tr。每个父表行都应该有自己的添加和删除图标。因此，当我单击添加图标时，会创建一个新的文本区域，该代码对于第一行来说非常完美，但我在删除时遇到了问题。另一个问题是，如果我单击第 2 行中的第二个添加图标，它会将 textarea 添加到第 1 行。

代码如下：

<html>
    <head>
<script src="<?php echo base_url().'Scripts/jquery-1.9.1.js'?>" type="text/javascript"></script>
<script src="<?php echo base_url().'Scripts/migrate.js'?>" type="text/javascript"></script>

        <script type="text/javascript">
            $(function() {
                var addDiv = $('#addinput');
                var i = $('#addinput td').size() + 1;

                $('.addNew').on('click', function() {
                    $('<tr class="clone" id="row_'+i+'"><td ><textarea  id="p_new'+i+'" rows="1" cols="10" name="data[]" value="" placeholder="I am New" ></textarea><a href="#" class="remNew"><img src="<?php echo base_url(); ?>img/remove.png" alt="x" width="15px" height="15px"></a><td> </tr>').appendTo(addDiv);
                    i++;

                    return false;
                });

                $('.remNew').on('click', function() {
                    if( i > 1 ) {
                       // row_id=$(this).attr('id');

                      $('#row_'+i).remove();
                        i--;
                    }
                    return false;
                });
            });

        </script>

    </head>
    <body>       

        <table border="1">
            <tr>

            <td id="addinput">
                <textarea  id="p_new" rows="1" cols="10" name="data[]" value="" placeholder="Input Value" ></textarea><a href="#" class="addNew"><img src="<?php echo base_url(); ?>img/add.png" alt="+" width="15px" height="15px"></a>
            </td>
            </tr>
               <tr>           
            <td>
                <textarea  id="p_new_1" rows="1" cols="10" name="data[]" value="" placeholder="Input Value" ></textarea><a href="#" class="addNew"><img src="<?php echo base_url(); ?>img/add.png" alt="+" width="15px" height="15px"></a>
            </td>
            </tr>

        </table>       

    </body>
</html>

【问题讨论】：

为什么你首先得到了具有相同 ID [addNew] 的元素？它们应该是独一无二的。
我已经编辑了id，但仍然没有成功
为什么要将 TR 附加到 addDiv？不确定这是否在语义上正确。 api.jquery.com/appendTo

标签： jquery html performance dom html-table

【解决方案1】：

1) 使用 addNew 的类而不是 id。

2) 您正在将新行附加到列（不知道为什么要这样做）

在这里查看演示http://jsfiddle.net/yeyene/CgwCC/

现在可以添加和删除了。

$(document).ready(function(){
    var i = 1;

    $('.addNew').on('click', function() {
        $('<tr class="clone"><td><textarea  id="p_new'+i+'" rows="1" cols="10" name="data[]" value="" placeholder="I am New" ></textarea><a href="#" class="remNew">-</a><td> </tr>').appendTo($(this).parent('td'));
        i++;

        return false;
    });

    $('.remNew').live('click', function() {
        var id = $(this).parentsUntil('tr.clone').attr('id');
        if( id != '1' ) {
          $(this).parentsUntil('tr.clone').remove();
          i--;
        }
        return false;
    });
});

【讨论】：

我正在使用 jquery migrate.js 来捕获它
再次检查我的答案和演示。
非常感谢YEYENE，这让我很头疼，喝杯咖啡吧。谢谢