1

这是我在 div 中的表格：

<div class="employmentHistory">
        <table class="employmentHistoryForm">
            <tr>

                    <th>Name</th>
                    <th>Position</th>
                    <th>Action</th>

            </tr>
            <tr class = "row">
                <td>
                    <g:textField id="name" name="company" class="company"></g:textField></td>
                <td>
                    <g:textField id="position" name="position" class="pos" ></g:textField></td>
                <td><input type="button" class="deleteThisRow"  value="Delete"/></td>
            </tr>
        </table>
    <g:textField name="sumCompany" id="destination" ></g:textField>
    </div>

这是我克隆上表第二行的 jQuery 脚本：

$(document).ready(function(){
            //This line clones the row inside the '.row' class and transforms it to plain html.
            //var clonedRow = $('.row').clone().html();
            var clonedRow=$('.row').clone().html().find("input").each(function() {
                $(this).val('').attr('id', function(_, id) { return id + index });
            }).end();

            //This line wraps the clonedRow and wraps it <tr> tags since cloning ignores those tags
            var appendRow = '<tr class = "row">' + clonedRow + '</tr>';

            $('#btnAddMore').click(function(){
                //this line get's the last row and appends the appendRow when it finds the correct row.
                $('.employmentHistoryForm tr:nth-child(2)').after(appendRow);
            });

            //when you click on the button called "delete", the function inside will be triggered.
            $('.deleteThisRow').live('click',function(){
                var rowLength = $('.row').length;
                //this line makes sure that we don't ever run out of rows.
                if(rowLength > 1){
                    deleteRow(this);
                }else{
                    $('.employmentHistoryForm tr:last').after(appendRow);
                    deleteRow(this);
                }
            });

            function deleteRow(currentNode){
                $(currentNode).parent().parent().remove();
            }
            index++;
        });

将上述脚本中的行用作：

var clonedRow = $('.row').clone().html();

该代码完美地克隆了表行并将其附加到表的末尾。但它复制了文本字段的 id 字段，我想为克隆的行分配唯一的 id，我尝试如下：

var clonedRow=$('.row').clone().html().find("input").each(function() {
                    $(this).val('').attr('id', function(_, id) { return id + index });
                }).end();

但是现在查询根本不起作用。那么我在哪里弄错了，解决方案是什么？

4

1 回答 1

2

我做了类似的事情，我有一个隐藏的部分，里面有我想克隆的标记。克隆后，我会通过 javascript 设置 id。

<div id="sectionToClone">
    <input class="company" type="text" />
    <input class="pos" type="text" />
    <!-- More stuff here -->
</div>

然后在我的 JavaScript 中，我会做这样的事情：

var clonedSection = $("#sectionToClone").clone();
var newMarkup = clonedSection.attr("id","section" + idCounter);
newMarkup.find(".company").attr("id","company" + idCounter);
newMarkup.find(".pos").attr("id","pos" + idCounter);
idCounter++;
$("#sectionToAppendTo").append(newMarkup);

然后，当替换发生时，每个部分都会有唯一的 id。当需要获取所有值时，我会在 0 处启动一个单独的计数器并递增以idCounter将值拉出到一个长度数组中，idCounter并根据需要处理它们。每次查找看起来像$("#sectionX .company").val(),$("#sectionX .pos)等...

在您的 CSS 中，使用 ID 选择器使要克隆的部分隐藏：

#sectionToClone{
    display: none;
}

然后，当您在 JavaScript 中更改 ID 时，克隆的部分变得可见，因为 CSS 规则不适用于它。

于 2013-08-02T17:08:11.143 回答