1

我希望能够克隆一个带有 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>
4

1 回答 1

2

1）使用类addNew代替id。

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

在这里查看演示http://jsfiddle.net/yyene/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;
    });
});
于 2013-06-26T10:31:46.500 回答