Question

我希望能够克隆一个带有textarea的表tr。每个父表行都应该有自己的添加和删除图标。因此，当我单击添加图标时，会创建一个新的textarea，该代码对第一行完美无缺，但我删除了一个问题。另一个问题是，如果我单击第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>

Answer 1

1）使用addNew的类代替id。

2）您正在向列添加新行（不确定为什么要这样）

点击此处DEMO 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;
    });
});

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

1 个答案: