Добавить и удалить поле ввода

Question

Добавить и удалить поле ввода

0

Я нахожу здесь две ошибки:

Номер не будет продолжать подсчет, как будет 4 в следующем входном значении. В настоящее время при добавлении нового ввода значение равно 1.
Кнопка удаления не работает, если есть 3 поля ввода. Но кнопка удаления работает, если добавить еще одно поле ввода. Во всяком случае, только один может быть удален.

HTML

<div id="add_form">
<table>
    <tr>
        <td><input type="text" value="1"/></td>
        <td><div class="remove"><a href="#" class="removeclass">Remove</a></div></td>
    </tr>
    <tr>
        <td><input type="text" value="2"/></td>
        <td><div class="remove"><a href="#" class="removeclass">Remove</a></div></td>
    </tr>
    <tr>
        <td><input type="text" value="3"/></td>
        <td><div class="remove"><a href="#" class="removeclass">Remove</a></div></td>
    </tr>
</table>
</div>
<a href="#" id="add_field">Add</a>

JQuery

    $(document).ready(function() {

    var MaxInputs       = 99;
    var InputsWrapper   = $("#add_form table");
    var AddButton       = $("#add_field");

    var x = InputsWrapper.length;
    var FieldCount=1;

    $(AddButton).click(function (e) {

        if(x <= MaxInputs) {

            FieldCount++;

            $(InputsWrapper).append('<tr><td><input type="text" value="' +  x + '"/></td><td><div class="remove"><a href="#" class="removeclass">Remove</a></div></td></tr>');
            x++;

        }

        return false;

    });

    $("body").on("click",".removeclass", function(e) {

        if( x > 1 ) {

            $(this).closest('tr').remove();
            x--;

        }

        return false;

    }) 

});

http://jsfiddle.net/hxbc7/

Alan Yong 19 фев. 2014, в 08:39

Источник

0

Похоже, ваша проблема здесь: попробуйте изменить эту строку var InputsWrapper = "$(#add_form table"); к этому var InputsWrapper = "#add_form table";
Pavlo 19 фев. 2014, в 07:37
0

Я пробовал свой путь, но у числа, увиденного, есть проблема. jsfiddle.net/hxbc7/13 Вы можете проверить эту ссылку. Число увеличивается до 15, когда я добавляю поле ввода
Alan Yong 19 фев. 2014, в 07:40
0

Я настроил ваш код, jsfiddle.net/hxbc7/15 . я верю, это то, что вы хотели
dreamweiver 19 фев. 2014, в 07:43

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

3 ответа

0

измените код, подобный этому

    $(document).ready(function() {

    var MaxInputs       = 99;
    var InputsWrapper   = $("#add_form table");
    var AddButton       = $("#add_field");

    var x  = $("input[type=text]").length;
    var FieldCount=1;

    $(AddButton).click(function (e) {

        if(x <= MaxInputs) {

             x++;

            $(InputsWrapper).append('<tr><td><input type="text" value="' +  x + '"/></td><td><div class="remove"><a href="#" class="removeclass">Remove</a></div></td></tr>');


        }

        return false;

    });

    $("body").on("click",".removeclass", function(e) {

        if( x >= 1 ) {

            $(this).closest('tr').remove();
            x--;

        }

        return false;

    }) 

});

Anoop Joshi 19 фев. 2014, в 06:32

0

Попробуйте это: подсчитайте значение FieldCount и добавьте его в текстовое поле.

$(document).ready(function() {

    var MaxInputs       = 99;
    var InputsWrapper   = $("#add_form table");
    var AddButton       = $("#add_field");

    var x = InputsWrapper.length;
    var FieldCount=3;

    $(AddButton).click(function (e) {
        if(x <= MaxInputs) {

            FieldCount++;

            $(InputsWrapper).append('<tr><td><input type="text" value="' +  FieldCount + '"/></td><td><div class="remove"><a href="#" class="removeclass">Remove</a></div></td></tr>');
            x++;

        }

        return false;

    });

    $("body").on("click",".removeclass", function(e) {

        if( x > 1 ) {

            FieldCount--;               
            $(this).closest('tr').remove();
            x--;

        }

        return false;

    }) 

});

Sudharsan S 19 фев. 2014, в 05:27

Ещё вопросы

Похоже, ваша проблема здесь: попробуйте изменить эту строку var InputsWrapper = "$(#add_form table"); к этому var InputsWrapper = "#add_form table";
Я пробовал свой путь, но у числа, увиденного, есть проблема. jsfiddle.net/hxbc7/13 Вы можете проверить эту ссылку. Число увеличивается до 15, когда я добавляю поле ввода
Я настроил ваш код, jsfiddle.net/hxbc7/15 . я верю, это то, что вы хотели

V31 · Accepted Answer · 2014-02-19T05-40-00.000Z

Я обновил скрипту, которую вы создали. http://jsfiddle.net/hxbc7/12/

В вашем коде была ошибка, которую я исправил.

Вместо этой строки

var InputsWrapper   = $("#add_form table");

должен быть

var InputsWrapper   = $("#add_form table tr");