динамическое добавление строки в таблицу не работает с помощью jquery

Question

динамическое добавление строки в таблицу не работает с помощью jquery

0

Я хочу добавить это в таблицу, но, если я нажму кнопку "добавить", две строки добавят симулятивно, я имею в виду циклы, идущие дважды. Но никаких проблем с удалением строки.

$(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>

Supriya 25 сен. 2013, в 12:08

Источник

Теги:

jquery

3 ответа

Ещё вопросы

Sunny · Answer 1 · 2013-09-25T08-42-00.000Z

Я проделал определенную работу, пожалуйста, проверьте

JQuery:

<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/. пожалуйста, сделайте это, поскольку у меня есть некоторое ограничение по времени.

Надеюсь, это поможет вам. Пожалуйста, обновите для дальнейшей помощи.

Arun P Johny · Answer 2 · 2013-09-25T07-30-00.000Z

Единственная проблема, которую я вижу с тех пор, как вы используете эффект(), вам нужно включить библиотеку пользовательского интерфейса jQuery

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.3/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.3/jquery-ui.js"></script>

Демо- версия: Plunker

@JitendraPancholi сделано уже в комментариях
Извините, я включил файл jquery, в котором я дважды написал код jquery ... поэтому цикл выполнялся дважды ... и спасибо всем, кто откликнулся ...

simonlchilds · Answer 3 · 2013-09-25T06-53-00.000Z

Я подозреваю, что это происходит потому, что вы используете селектор классов, который вызывает событие click для каждого элемента, имеющего этот класс. Попробуйте использовать уникальное имя класса или идентификатор.

"details_of_partners_directors" - это имя таблицы.
имя не ID, я знаю .. но для нашей идентификации мы дали как "name_id".