양식 요소를 동적으로 추가 할 수있는 편리한 방법 (jQuery)

Question

질문 중 하나에 대해 여러 항목을 추가 할 수있는 양식을 설정 중입니다. 나는 javacript없이 이것을 접근 가능하게하고, Add 버튼을 클릭 할 때마다 입력 필드가 동적으로 보여 지도록하는 가장 좋은 방법을 찾아 내려하고있다. 나는 동적으로 컨텐츠를 작성하는 데 필요한 JS 코드에 문제가없는

Type: <input name = "type[]" id = "type" /> 
Sub type: <input name = "subtype[]" id = "type" /> 
Number: <input name = "num[]" id = "type" /> 

: 내가 각 항목에 대해 수집해야하는 데이터의 3 가지가 있습니다, 아래의 HTML이 어떻게 보일까의 기본이다 추가 버튼을 클릭 할 때마다, 그러나 사람이 추가 할 수있는 행의 양에 제한을 설정하는 것이 합리적이라고 생각합니다 (이 유형의 데이터의 경우, 최대 10 개 항목이 예상됩니다). HTML 폼에 10 개의 빈 필드를 추가 할 수 있습니다. 그런 다음 내 jQuery 코드를 domready에 숨기면 추가 단추를 클릭 할 때마다 폼에 다음 사용 가능한 빈 필드가 표시됩니다 (10 번째에 도달 할 때까지 추가 단추가 비활성화 됨).

이 접근 방식은 의미가 있습니까?

Answer 1

예, 동적 행을 처리하는 일반적인 점진적 향상 방법을 설명했습니다.

당신은 항상뿐만 아니라 손상시킬 수 : 당신은/새로운 행을 추가 비 JS 사용자가 한 번에 N 행을 추가 할 수 있도록 설명하지만, 복제 JS를 사용할 때 페이지에 N 여분의 행을 넣어 필요에 따라 JS 사용자가 원하는만큼 추가 할 수 있습니다.

(사용자가 돌아와서 나중에 행을 추가 할 수 있고 비 JS 사용자가 여러 행을 한꺼번에 추가하려는 경우가 아니라면 간단한 버전의 경우 n = 1이 될 수 있습니다. 스크립트에 의해 문서에서 제거되고 필요에 따라 문서에 다시 복제되는 빈 행.)