jQuery 동일한 하이퍼 링크에서 양식 요소의 다른 세트 표시/숨기기

Question

최대 6 명의 자녀를 추가 할 수있는 양식이 있습니다.

  <table class="portletTable child" cellpadding="0" cellspacing="0" border="0" summary="Please enter some more details regarding your dependants"> 
      <tr> 
       <th> 
        <label for="indTitle">Title</label> 
       </th> 
       <td colspan="3"> 
        <select id="indTitle" class="inlineSpace"> 
         <option value="Please select">Please select...</option> 
         <option value="Mr">Mr</option> 
         <option value="Mrs">Mrs</option> 
         <option value="Ms">Ms</option> 
         <option value="Miss">Miss</option> 
         <option value="Dr">Dr</option> 
         <option value="Other">Other</option> 
        </select> 
        <label for="indOther" class="inlineSpace">Other</label> 
        <input type="text" class="text" name="indOther" id="indOther" maxlength="20" /> 
       </td> 
      </tr> 
      <tr> 
       <th> 
        <label for="firstname">First name</label> 
       </th> 
       <td colspan="3"> 
        <input type="text" class="text" maxlength="50" value="" id="firstname" /> 
       </td> 
      </tr> 
      <tr> 
       <th> 
        <label for="lastname">Last name</label> 
       </th> 
       <td colspan="3"> 
        <input type="text" class="text" maxlength="50" value="" id="lastname" /> 
       </td> 
      </tr>  
      <tr> 
       <th> 
        <label for="dobDay">Date of birth</label> 
       </th> 
       <td colspan="3"> 
        <select name="dobDay" id="dobDay" class="inlineSpace"> 
         <option value="day">Day</option> 
        </select> 
        <label for="dobMonth" class="offScreen">Month</label> 
        <select name="dobMonth" id="dobMonth" class="inlineSpace"> 
         <option value="month">Month</option> 
        </select> 
        <label for="dobYear" class="offScreen">Month</label>     
        <select name="dobYear" id="dobYear"> 
         <option value="year">Year</option> 
        </select> 
        <p class="fieldNote">You must be over 'minimum partner age' and under 'max partner age'</p>    
       </td> 
      </tr> 
      <tr> 
       <th> 
        Gender 
       </th> 
       <td colspan="3"> 
        <input id="male" name="childGender" class="radio" type="radio" /> 
        <label for="male" class="inlineSpace">Male</label> 
        <input id="female" name="childGender" class="radio" type="radio" /> 
        <label for="female">Female</label> 
       </td> 
      </tr>    
     </table> 

내가보기에서 숨길 수 기본적으로 다음과 같은 다섯으로 보여주기 위해 첫 번째 자식이 필요합니다 따라서 다음과 같은 HTML 6 개 세트가있을 것입니다.

사용자가 다음과 같은 링크가 나는 그들이 그것을 클릭하면 다음 다시 세 번째 자식 입력은 보여 등등 ... 물론

<tr> 
       <th class="dependant"> 
        <a href="" class="add">Add another child to your policy</a> 
       </th> 
      </tr> 

여섯 번째 아이가 표시 될 때, 두 번째 아이가 보여주고 싶은 클릭

링크가 표시되지 않아야합니다.

는 또한 사용자가이 하이퍼 링크 최근 추가 된 아이를 제거 할 수있는 옵션을 가지고 있다는 점에서 사실로 반대가 필요합니다 자바 스크립트가 꺼져있는 경우

이

<tr> 
       <th class="dependant"> 
        <a href="" class="remove">Remove this child from your policy</a> 
       </th> 
      </tr> 

모든 기본적으로 표시됩니다.

당신이 도와 주시면 미리 감사드립니다.

Answer 1

이 그것을 수행해야합니다 당신이 원하는 기능을 제공한다

$(function() { 
    // Hide everything except the first one 
    $('.portletTable').not(':first').hide(); 

    // Remove functionality 
    $('.dependant .remove').click(function() { 
     // Hide this child and move it to the end of the table 
     $(this) 
      .closest('.portletTable') 
      .hide() 
      .appendTo($(this).closest('form')); 
    }); 

    // Show functionality 
    $('.dependant .remove').click(function() { 
     // Show the first hidden table 
     $(this).closest('form').find('.portletTable:hidden:first').show(); 
    }); 
}); 

합니다. 모든 입력 및 선택을 기본 상태로 재설정하여 제거 기능을 향상시키고 자 할 수도 있습니다. 나중에 링크를 추가하지 않을 경우

Answer 2

모든 테이블을 구분 된 ID로 배치하고 document.getElementById ("table_id"). style.display = "none"또는 document.getElementById ("table_id")를 사용하여 가시성 상태를 조작 할 수 있습니다. 블록".

Answer 3

$('.add').live('click', 
    function() { 
     //seek next element with class "child" 
     var $nextChild = $(this).parents('.child').next('.child :first'); 
     if ($nextChild.size() > 0) //exists? 
      $nextChild.show(); //show it 
    } 
); 

$('.remove').live('click', 
    function() { 
     //hide the parent with class "child" 
     $(this).parents('.child').hide(); 
    } 
); 

bind와 live를 교체합니다.