입력 필드 추가 및 제거

앨런 용

여기에 두 가지 버그가 있습니다.

  1. 숫자는 다음 입력 값에서 4가되는 것처럼 계속 계산되지 않습니다. 현재 새 입력을 추가 할 때 값은 1입니다.
  2. 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/

V31

당신이 만든 바이올린을 업데이트했습니다. http://jsfiddle.net/hxbc7/12/

내가 수정 한 코드에 오류가 있습니다.

이 줄 대신

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

그것은해야한다

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

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

입력 필드에 텍스트 힌트 제거 및 추가

분류에서Dev

jquery로 입력 필드 추가 및 제거

분류에서Dev

동적 형식의 각 입력 필드 삭제 (추가 및 제거)

분류에서Dev

입력 필드 추가 / 제거 수정

분류에서Dev

Rails : Cocoon gem 필드 추가 및 제거

분류에서Dev

입력 필드를 사용하여 여러 <tr>을 동적으로 추가 및 제거하는 방법

분류에서Dev

값이 재설정되지 않는 Reactjs에서 입력 필드 추가 및 제거

분류에서Dev

Laravel 입력 필드 추가 / 제거 업데이트 값 문제

분류에서Dev

jQuery를 사용하여 필드 추가 및 필드 제거

분류에서Dev

Django : 버튼 클릭으로 클래스 뷰를 사용하여 추가 입력 필드 추가 및 삭제

분류에서Dev

입력 필드 추가, 반복 및 div에 값 출력

분류에서Dev

입력 값 추가 및로드시 양식 제출

분류에서Dev

jQuery에서 선택 입력으로 div 추가 및 제거

분류에서Dev

Bootstrap Datepicker 동적 양식 필드 추가 및 제거

분류에서Dev

ArrayList에서 필터 추가 및 제거

분류에서Dev

해당 입력 필드에 합계 값 추가 및 설정

분류에서Dev

JQuery는 입력 필드 및 날짜 선택기 추가

분류에서Dev

다른 입력을 사용하여 동적으로 입력 추가 및 제거

분류에서Dev

Prestahop의 백 오피스 제품에 탭 및 필드 추가-입력을 올바르게 저장하는 방법?

분류에서Dev

jQuery-HTML 코드 추가 및 제거

분류에서Dev

jQuery-HTML 코드 추가 및 제거

분류에서Dev

Jquery 복제 및 입력 값에 추가

분류에서Dev

jQuery-입력에 필요한 추가 / 제거

분류에서Dev

마지막 요소로 div에 열 (입력 요소) 추가 (복제) 및 제거

분류에서Dev

HTML 옵션 및 입력 필드가 제대로 표시되지 않음

분류에서Dev

여러 HTML 입력 필드에서 이미지를 추가하거나 제거 할 수 없습니다.

분류에서Dev

사용자 지정 제품 입력 필드 추가 NopCommerce

분류에서Dev

배열에 여러 입력 필드를 추가하는 문제

분류에서Dev

React JS 및 Rails로 필드 추가, 필드 편집 및 필드 삭제 처리

Related 관련 기사

  1. 1

    입력 필드에 텍스트 힌트 제거 및 추가

  2. 2

    jquery로 입력 필드 추가 및 제거

  3. 3

    동적 형식의 각 입력 필드 삭제 (추가 및 제거)

  4. 4

    입력 필드 추가 / 제거 수정

  5. 5

    Rails : Cocoon gem 필드 추가 및 제거

  6. 6

    입력 필드를 사용하여 여러 <tr>을 동적으로 추가 및 제거하는 방법

  7. 7

    값이 재설정되지 않는 Reactjs에서 입력 필드 추가 및 제거

  8. 8

    Laravel 입력 필드 추가 / 제거 업데이트 값 문제

  9. 9

    jQuery를 사용하여 필드 추가 및 필드 제거

  10. 10

    Django : 버튼 클릭으로 클래스 뷰를 사용하여 추가 입력 필드 추가 및 삭제

  11. 11

    입력 필드 추가, 반복 및 div에 값 출력

  12. 12

    입력 값 추가 및로드시 양식 제출

  13. 13

    jQuery에서 선택 입력으로 div 추가 및 제거

  14. 14

    Bootstrap Datepicker 동적 양식 필드 추가 및 제거

  15. 15

    ArrayList에서 필터 추가 및 제거

  16. 16

    해당 입력 필드에 합계 값 추가 및 설정

  17. 17

    JQuery는 입력 필드 및 날짜 선택기 추가

  18. 18

    다른 입력을 사용하여 동적으로 입력 추가 및 제거

  19. 19

    Prestahop의 백 오피스 제품에 탭 및 필드 추가-입력을 올바르게 저장하는 방법?

  20. 20

    jQuery-HTML 코드 추가 및 제거

  21. 21

    jQuery-HTML 코드 추가 및 제거

  22. 22

    Jquery 복제 및 입력 값에 추가

  23. 23

    jQuery-입력에 필요한 추가 / 제거

  24. 24

    마지막 요소로 div에 열 (입력 요소) 추가 (복제) 및 제거

  25. 25

    HTML 옵션 및 입력 필드가 제대로 표시되지 않음

  26. 26

    여러 HTML 입력 필드에서 이미지를 추가하거나 제거 할 수 없습니다.

  27. 27

    사용자 지정 제품 입력 필드 추가 NopCommerce

  28. 28

    배열에 여러 입력 필드를 추가하는 문제

  29. 29

    React JS 및 Rails로 필드 추가, 필드 편집 및 필드 삭제 처리

뜨겁다태그

보관