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

根据您查看来源的位置，它不会在那里。比如在IE中。它只会在任何javascript修改之前报告页面。

获取firefox的firebug。它会让你看到一切。

Answer 3

这些元素是动态创建的，因此在源代码中找不到。当您通过javascript更改源代码时，并不是源代码会自动更新。

名为Web developers toolbar的firefox扩展程序有一个选项“查看生成的源代码”，它会向您显示包含动态创建的元素的来源。

使用JQuery添加或删除表单元素

3 个答案: