无法使用 jquery 克隆表的行

Question

这是我在 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();

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

Answer 1

我做了类似的事情，我有一个隐藏部分，其中包含我想要克隆的标记。克隆后我会通过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 规则不适用于它。