JQuery를 사용하여 양식 요소 추가 또는 제거

Question

양식 입력 필드를 더하거나 뺄 때 JQuery와 함께 작동하는 함수를 얻으려고했습니다. 나는 출발점으로 찾은 예를 사용하고있다.

<script type="text/javascript"> 
     $(function(){ 
      // start a counter for new row IDs 
      // by setting it to the number 
      // of existing rows 
      var newRowNum = 2; 

      // bind a click event to the "Add" link 
      $('#addnew').click(function(){ 
       // increment the counter 
       newRowNum += 1; 

       // get the entire "Add" row -- 
       // "this" refers to the clicked element 
       // and "parent" moves the selection up 
       // to the parent node in the DOM 
       var addRow = $(this).parent().parent(); 

       // copy the entire row from the DOM 
       // with "clone" 
       var newRow = addRow.clone(); 

       // set the values of the inputs 
       // in the "Add" row to empty strings 
       $('input', addRow).val(''); 
       $('name', addRow).val('os' + newRowNum); 

       // replace the HTML for the "Add" link 
       // with the new row number 
       $('td:first-child', newRow).html('<input type="hidden" name="on' + newRowNum + 'value="Email Address ' + newRowNum + '>Recipient'); 

       // insert a remove link in the last cell 
       $('td:last-child', newRow).html('<a href="" class="remove">Remove<\/a>'); 

       // loop through the inputs in the new row 
       // and update the ID and name attributes 
       $('input', newRow).each(function(i){ 
        var newID = 'os' + newRowNum; 
        $(this).attr('id',newID).attr('name',newID); 
       }); 

       // insert the new row into the table 
       // "before" the Add row 
       addRow.before(newRow); 

       // add the remove function to the new row 
       $('a.remove', newRow).click(function(){ 
        $(this).parent().parent().remove(); 
        return false;    
       }); 

       // prevent the default click 
       return false; 
      }); 
     }); 
     </script> 

있는 HTML이 다음과 같다 : 여기

내가 지금까지 무엇을 가지고

<table> 
<tr><td> 
    Email Addresses</td><td>&nbsp;</td> 
<td>&nbsp;</td> 
</tr> 
<tr> 
    <td><input type="hidden" name="on2" value="Email Address 1"><a id="addnew" href="">Add</a></td><td><input name="os2" type="text" id="os2" value="" size="24" maxlength="60" /></td> 
    <td>&nbsp;</td> 
</tr> 
</table> 

내가 약 혼란 스러워요 왜, 내가 브라우저에서 페이지를 볼 때, 여분의 입력 필드를 볼 수 있지만 원본을 보면 추가 필드의 코드를 찾을 수 없습니다.

누군가 내게 이것을 밝힐 수 있습니까?

데이브

Answer 1

내가 대한 혼란 스러워요 나는 브라우저에서 페이지를 볼 때 나는 소스를 보면 때, 나는의 코드를 추가 입력 필드를 볼 수 있지만 이유입니다 추가 필드가 없습니다.

페이지가로드 될 때 브라우저에 DOM 만 표시된다는 것입니다.

Firebug 또는 Webdeveloper Toolbar (두 가지 Firefox 부가 기능)이 필요하며 jQuery가 DOM을 수정 한 이유를 확인할 수 있습니다.

편집 : Webdeveloper Toolbar for Internet Explorer도 있습니다.

Answer 2

이러한 요소는 동적으로 만들어 지므로 소스 코드에서 찾을 수 없습니다. 소스 코드가 javascript를 통해 자동으로 업데이트 될 때 소스 코드가 자동으로 업데이트되는 것은 아닙니다.

Web developers toolbar이라는 Firefox 확장 프로그램에는 동적으로 생성 된 요소가 포함 된 소스를 보여주는 "생성 된 소스보기"옵션이 있습니다.

Answer 3

소스를보고있는 위치에 따라 위치하지 않습니다. IE에서와 같이 . 모든 자바 스크립트가 수정하기 전에 페이지를보고합니다.

파이어 폭스를위한 방화범을 사다. 그것은 모든 것을 보도록 해줄 것입니다.