Question

（希望这不会重复;第二次尝试提交这个问题）

我正在制作一个表格，我希望用户能够添加一定数量的联系人（姓名和电话号码）。我只想显示这些表单字段的一行，并允许用户单击一个元素，该元素将添加初始行的重复项（当然是空的，并且当它返回控制器时使用更新的id来操作该数据）（ASP.NET MVC应用程序）。

我发现了一些使用jQuery库的1.2.x版本的示例，但我似乎无法使用它们来使用1.3.2。问题与$ .clone（）方法有关。当我在选择器/元素上调用此方法时，页面会进行完全刷新，并向用户显示一个干净的表单。

我一直在使用的当前示例（从http://devblog.jasonhuck.com/assets/infiniteformrows.html拉出来）看起来像：

表格 -

<table id="tabdata">
            <thead>
                <tr>
                    <th>Row</th>
                    <th>Cell 1</th>
                    <th>Cell 2</th>
                    <th>Cell 3</th>

                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><a id="addnew" href="">Add</a></td>
                    <td><input id="n0_1" name="n0_1" type="text" /></td>
                    <td><input id="n0_2" name="n0_2" type="text" /></td>

                    <td><input id="n0_3" name="n0_3" type="text" /></td>
                    <td></td>
                </tr>
            </tbody>
        </table>

脚本 -

<script type="text/javascript">
    $(function() {
        var newRowNum = 0;

        $('#addnew').click(function() {
            newRowNum++;
            var addRow = $(this).parent().parent();
            var newRow = addRow.clone();
            $('input', addRow).val('');
            $('td:first-child', newRow).html(newRowNum);
            $('td:last-child', newRow).html('<a href="" class="remove">Remove<\/a>');
            $('input', newRow).each(function(i) {
                var newID = newRowNum + '_' + i;
                $(this).attr('id', newID).attr('name', newID);
            });
            addRow.before(newRow);

            $('a.remove', newRow).click(function() {
                $(this).parent().parent().remove();
                return false;
            });

            return false;
        });
    });
 </script>

当方法声明“var newRow = addRow.clone（）;”时，页面会重新加载。不知道为什么，但是针对早期的jQuery版本运行脚本，它运行得很好。如果我能提供帮助，我宁愿不退回版本。

有什么想法？有没有更好的方法来解决这个问题？它应该非常简单，但事实证明比我想要的库更加乏味。

Answer 1

Here is an example您的代码。它在Firefox 3和IE 7中都可以正常使用。代码使用的是jQuery 1.3.2。如果您想编辑代码，只需将/edit添加到网址即可。

一些想法 -

您正在查看哪些浏览器无效？
您是否有其他可能导致冲突的JavaScript库？

使用jQuery构建动态表单部分

1 个答案: