1

テキストエリアを含むテーブル tr のクローンを作成できるようにしたいと考えています。親テーブルの各行には、独自の追加アイコンと削除アイコンが必要です。そのため、追加アイコンをクリックすると、新しいテキストエリアが作成されます。これは、コードが最初の行に対して完全に機能しますが、削除に問題があります。別の問題は、行 2 の 2 番目の追加アイコンをクリックすると、テキストエリアが行 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

addNew1) 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;
    });
});
于 2013-06-26T10:31:46.500 に答える