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>

上記の表の 2 行目を複製する 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 に答える