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规则不适用于它。

无法使用jquery克隆表行

1 个答案: