Fatal编程技术网
  • jquery/
  • Jquery 在给定表行中克隆整个tr表实体

Jquery 在给定表行中克隆整个tr表实体

jquery html performance dom

Jquery 在给定表行中克隆整个tr表实体,jquery,html,performance,dom,html-table,Jquery,Html,Performance,Dom,Html Table,我希望能够克隆一个包含textarea的表tr。每个父表行都应该有自己的添加和删除图标。因此，当我单击add图标时，会创建一个新的textarea，这段代码在第一行中做得非常好，但是我在删除时遇到了一个问题。另一个问题是，如果我单击第2行中的第二个add图标，它会将textarea添加到第1行 代码如下： <html> <head> <script src="<?php echo base_url().'Scripts/jquery-1.9.1.js'

我希望能够克隆一个包含textarea的表tr。每个父表行都应该有自己的添加和删除图标。因此，当我单击add图标时，会创建一个新的textarea，这段代码在第一行中做得非常好，但是我在删除时遇到了一个问题。另一个问题是，如果我单击第2行中的第二个add图标，它会将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>


1） 将类用于
addNew
而不是id

2） 您正在将新行追加到列（不确定为什么需要这样做）

在这里查看演示

添加和删除正在工作


$(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;
    });
});



$（文档）.ready（函数（）{
var i=1；
$（'.addNew'）。在（'click'，function（）上{
$（''）.appendTo（$（this.parent（'td'））；
i++；
返回false；
});
$（'.remNew'）.live（'click'，function（）{
var id=$（this.parentsUntil（'tr.clone'）.attr（'id'）；
如果（id！=“1”）{
$（this.parentsUntil（'tr.clone'）.remove（）；
我--；
}
返回false；
});
});

为什么首先要使用相同ID的元素[addNew]？它们应该是唯一的。我已经编辑了id，但仍然没有成功。为什么要在addDiv中添加TR？不确定这在语义上是否正确。我正在使用jquery migrate.js来捕获它，再次检查我的答案和演示。非常感谢YEYENE，这让我很头疼，我喝了一杯咖啡。非常感谢。