7

jQueryコードの書き方を理解するのに助けが必要です。

onclick でテーブルを動的に複製する必要があります。しかし、テーブルとその子要素のIDを毎回変更する必要があります。テーブルには多くの子が含まれる可能性があるため、これを手動で行うのは非常に困難です。すべての子 (すべての子孫) 要素の ID を変更する方法が必要です。私は常にIDにカウンターを追加します。(子供は直接の子供にのみアクセスすることは知っていますが、それが機能するかどうか試してみたかっただけです)。jQueryまたはJavascriptでこれを行う方法を知っている場合は、お知らせください。

<table id="table"> 
    <tr id = "tr" > 
        <td id="td"> 
            <span id="span" value="hiii">hi</span> 
        </td> 
    </tr>
</table> 

<button>Clone</button> 

<script> 
    $("button").click(function () { 
        var table = $("#table").clone(true,true) 
        table.attr( 'id', function() { return this.id +"1"; })    
        alert($("#table1").children()) 
        $("#table1").find(*).attr('id', function() { return this.id +"1"; }) 
        table.appendTo("#table") 
        alert(document.getElementById("tr1")) 
        alert(document.getElementById("span1").value) 
    }); 
</script>
4

3 に答える 3

8

elemがクローン構造の親であり、維持していると述べたカウンターである場合cntr、そのクローン構造のすべての ID を次のように修正できます。

function fixIds(elem, cntr) {
    $(elem).find("[id]").add(elem).each(function() {
        this.id = this.id + cntr;
    })
}

ID の末尾にすでに複製された番号があり、その番号を置き換えたい場合は、次のようにできます。

function fixIds(elem, cntr) {
    $(elem).find("[id]").add(elem).each(function() {
        this.id = this.id.replace(/\d+$/, "") + cntr;
    })
}

したがって、質問に追加したコードに基づいて、次のことができます。

<script> 
    var cloneCntr = 1;
    $("button").click(function () { 
        var table = $("#table").clone(true,true) 
        fixIds(table, cloneCntr);
        table.insertAfter("#table") 
        cloneCntr++;
    });
</script>

作業例: http://jsfiddle.net/jfriend00/wFu9K/

注: また、DOM 挿入コードを に変更しました。これはinsertAfter()、あるテーブルを別のテーブルに追加することができないためです (テーブルは、既存のテーブルの後または前のテーブルのセル内に配置されます)。

行を追加しようとしているだけの場合は、テーブル全体ではなく、行を複製する必要があります。

次のコードを使用して、複製された行を既存のテーブルに追加できます。

function fixIds(elem, cntr) {
    $(elem).find("[id]").add(elem).each(function() {
        this.id = this.id.replace(/\d+$/, "") + cntr;
    })
}
var cloneCntr = 1;
$("button").click(function () { 
    var row = $("#table tr").first().clone(true,true);
    fixIds(row, cloneCntr++);
    row.appendTo("#table") 
}); ​
于 2012-09-14T14:24:22.123 に答える
0 
$("#table1").find(*)

する必要があります

table.find("*")

$("#table1")テーブルを DOM にまだ追加していないため、そのコード行では何も返されません。そして*、文字列でなければならないセレクターです。

于 2012-09-14T14:23:18.997 に答える
0

できるよ

$Element.children().each(function () {
        this.id = new_id;
 });
于 2016-10-20T19:30:01.637 に答える