0

これをテーブルに追加したいのですが、追加ボタンをクリックすると、2 つの行が同時に追加されます。つまり、ループが 2 回実行されます。しかし、行を削除しても問題ありません。

$(document).ready(function() {
    $(".add_partners_details").click(function() {
    var newrow = $('<div class="t-row"><div class="t-col"><input type="text" class="text_field txtNumeric" name="partners_or_directors_sl_no_id[]" value="" placeholder=""/></div><div class="t-col"><input type="text" class="text_field txtNumeric" name="partners_or_directors_pin_id[]" value="" placeholder=""/></div><div class="t-col end"><input type="text" class="text_field required txtAlphabet" name="partners_or_directors_name_id[]" value="" placeholder=""/></div><div class="t-col border_none"><a href="javascript:void(0);" class="remove_partners_details">Remove</a></div></div>');
        $("#details_of_partners_directors").append(newrow);
    });

    $("#details_of_partners_directors").on('click','.remove_partners_details',function() {
        $(this).parent().parent().remove();
    });
});

HTML

<div class="t-row">
    <div class="t-col">
         <input type="text" class="text_field txtNumeric"name="partners_or_directors_sl_no_id[]" value="" placeholder=""/>
    </div>
    <div class="t-col">
         <input type="text" class="text_field txtNumeric" name="partners_or_directors_pin_id[]" value="" placeholder=""/>
    </div>
    <div class="t-col end">
         <input type="text" class="text_field required txtAlphabet" name="partners_or_directors_name_id[]" value="" placeholder=""/>
    </div>
    <div class="t-col border_none">
         <a href="javascript:void(0);" class="add_partners_details">Add</a>
    </div>
</div>
4

3 に答える 3

0

私はいくつかの仕事をしましたチェックしてください

Jクエリ：

<script type="text/javascript">
    $(document).ready(function () {

        $(".add_partners_details").click(function () {
            var curindex = parseInt($("#hdn").val(), 10);
            if (curindex == 0) {
                curindex = 1;
            }
            else {
                curindex = curindex + 1;
            }

            var newDiv = '<div class="t-row" id= parentDiv' + curindex + '>' +
    '<div class="t-col">' +
                '<input type="text" class="text_field txtNumeric" name="partners_or_directors_sl_no_id[]"' +
            'value="" placeholder="" /></div>' +
    '<div class="t-col">' +
        '<input type="text" class="text_field txtNumeric" name="partners_or_directors_pin_id[]" value="" placeholder="" /></div>' +
    '<div class="t-col end" id="last">' +
        '<input type="text" class="text_field required txtAlphabet" name="partners_or_directors_name_id[]" value="" placeholder="" /></div>' +
    '<div class="t-col border_none">' +
        '<a href="javascript:void(0);" class="add_partners_details">Add</a>' +
        '<a href="javascript:void(0);" class="Remove_partners_details">Remove</a>' +
    '</div>' +
'</div>';
            var prediv = $('#hdnParent').val();
            $("#" + prediv).after(newDiv);
            $("#hdn").val(curindex);
            $('#hdnParent').val('parentDiv' + curindex);

        });

        $(".Remove_partners_details").click(function () {

            var curindex = parseInt($("#hdn").val(), 10);
            if (curindex != 0)
                $("#" + $('#hdnParent').val()).remove();
            if (curindex >= 1) {
                $("#" + curindex).remove();
                if (curindex == 1) {
                    curindex = 0;
                }
                else {
                    curindex = curindex - 1;
                }
                if (curindex == 0) {
                    $('#hdnParent').val('parentDiv');

                }
                else {
                    $('#hdnParent').val('parentDiv' + curindex);

                }
                $("#hdn").val(curindex);
            }

        });

    });
</script>

ASPX:

   <div class="t-row" id="parentDiv">
    <div class="t-col">
        <input type="text" class="text_field txtNumeric"   name="partners_or_directors_sl_no_id[]"
            value="" placeholder="" /></div>
    <div class="t-col">
        <input type="text" class="text_field txtNumeric" name="partners_or_directors_pin_id[]"
            value="" placeholder="" /></div>
    <div class="t-col end" id="last">
        <input type="text" class="text_field required txtAlphabet" name="partners_or_directors_name_id[]"
            value="" placeholder="" /></div>
    <div class="t-col border_none">
        <a href="javascript:void(0);" class="add_partners_details">Add</a>
        <a href="javascript:void(0);" class="Remove_partners_details">Remove</a>
    </div>
  </div>
  <input type="hidden" id="hdn" value="0"/>
 <input type="hidden" id="hdnParent" value="parentDiv"/>

それは私の側でうまくいっています。ここで、非表示と表示の削除と追加ボタンのロジックのみを追加する必要があります。動的コントロールの場合は、http://api.jquery.com/live/を使用してイベントを発生させる必要があります。時間制限があるのでやってください。

これがお役に立てば幸いです。さらにサポートが必要な場合は更新してください。

于 2013-09-25T10:38:27.907 に答える
0

そのクラスを持つ各要素に対してクリックイベントを発生させるクラスセレクターを使用しているため、これが発生していると思われます。一意のクラス名または ID を使用してみてください。

于 2013-09-25T09:28:01.480 に答える