使用JQuery添加或刪除表單元素

我一直在試圖獲得一個與JQuery一起使用來添加或減少表單輸入字段的函數。我一直在用我發現的一個例子作爲出發點。使用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>

我感到困惑的是爲什麼，當我看網頁在瀏覽器中，我看到額外的輸入字段，但是當我查看源代碼時，無法找到額外字段的代碼。

有人能給我啓發嗎？

戴夫

來源

2009-10-14 Dave

我感到困惑的是，爲什麼當我看在瀏覽器頁面，我看到額外的輸入字段，但是當我看看源，換碼額外的字段無處可查。

這是因爲瀏覽器在加載頁面時只顯示DOM。

你需要Firebug或Webdeveloper Toolbar（都是Firefox插件），然後你可以看到jQuery做了什麼來修改你的DOM。

編輯：也有一個Webdeveloper Toolbar for Internet Explorer。

來源

2009-10-14 06:30:09 Natrium

爲IE開發工具欄+1，非常方便！我其實是在尋找類似的東西，但不知道我是如何錯過的。 – 2010-06-18 23:13:24

這些元素是動態創建的，因此在源代碼中找不到。當你通過javascript改變它時，並不是源代碼會自動更新。

一個名爲Web developers toolbar的Firefox擴展有一個選項「查看生成的源代碼」，它向您顯示源代碼，包括動態創建的元素。

來源

2009-10-14 06:30:42 Ikke

嗯，我的問題是這樣的：我試圖將這些動態創建的字段的值與它們的適當名稱值一起發送給PayPal，並且它們根本不被傳遞。當像這樣產生一個字段時，這些值是否在POST數組中傳遞？ Dave – Dave 2009-10-14 17:24:00

他們應該是;我在我的應用程序中使用這種技術。你確定這些元素實際上是附加到表單上嗎？使用像螢火蟲這樣的工具來檢查這一點。 – Ikke 2009-10-14 17:55:31

那麼我發現我的邏輯中有一些錯誤，使用WebDeveloper幫助我看到了這一點。我會在一分鐘內用Firebug進行檢查，但也許你可以用最後一個邏輯來幫助我：我使用以下方法嘗試循環並設置名稱和id，但它不起作用。我可能會遇到第一個child.next-sibling事件錯誤： $（'td：first-child.next-sibling.input'，newRow）。EACH（函數（I）{ \t \t \t \t \t VAR變化= newRowNum; \t \t \t \t \t $（本）.attr（ '身份證'， '如果' +更改）.attr（ '名'，「如果「+的變化）; \t \t \t \t}）; 戴夫 – Dave 2009-10-14 18:00:10

根據你在哪裏看源，它不會在那裏。如在IE中。它只會在任何javascript修改它之前報告該頁面。

獲取firefox的firebug。它會讓你看到一切。

來源

2009-10-14 06:31:24

使用JQuery添加或刪除表單元素

回答

相關問題