テーブルをコピーして、div内のすべてのidをjQueryでプレフィックスを追加する方法

Question

私はtableを持っていて、それぞれtr個の要素を持っていて、それぞれ固有のIDを持っています。

今度は新しいdiv の中にこれらの要素をすべてコピーし、すべてtrのIDに接頭辞を追加する必要があります。

以下のスニペットで私はそれを行いましたが、どのように私のtr要素の接頭辞を追加するためにすべてのIDを変更できますか？ <tr id="track251">から<tr id="my_track251">に変更するだけです。

$('#list-player-songs').html($('.sortable').html());

table { 
 
    background: antiquewhite; 
 
} 
 
table td { 
 
    border:1px solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<h3>Original table</h3> 
 
<table> 
 
    <tbody class="sortable"> 
 
    <tr id="track251"> \t \t \t \t \t \t \t 
 
     <td><div data-track-name="love.mp3" id="play251"></div></td> 
 
     <td id="song-url251">love</td> 
 
    </tr> 
 
    <tr id="track241"> \t \t \t \t \t \t \t 
 
     <td><div data-track-name="hate.mp3" id="play241"></div></td> 
 
     <td id="song-url241">hate</td> 
 
    </tr> 
 
    <tr id="track233"> \t \t \t \t \t \t \t 
 
     <td><div data-track-name="think.mp3" id="play233"></div></td> 
 
     <td id="song-url233">think</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<h3>Copied elements</h3> 
 
<div id="list-player-songs"></div>

Answer 1

それを取る（：

var $newTable = $('table.copyable:first').clone(); 
 
$newTable.removeClass('copyable'); 
 
$newTable 
 
    .find('tr') 
 
    .each(function() { 
 
    $(this).attr('id', 'my_'+$(this).attr('id')); 
 
    }); 
 

 
$('#list-player-songs').html(''); 
 
$newTable.appendTo($('#list-player-songs')); 
 

 
// debug 
 
$('#list-player-songs>table tr').each(function() { 
 
    console.log($(this).attr('id')); 
 
});

table.copyable { 
 
    background: antiquewhite; 
 
} 
 
table td { 
 
    border:1px solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<h3>Original table</h3> 
 
<table class="copyable"> 
 
    <tbody class="sortable"> 
 
    <tr id="track251"> \t \t \t \t \t \t \t 
 
     <td><div data-track-name="love.mp3" id="play251"></div></td> 
 
     <td id="song-url251">love</td> 
 
    </tr> 
 
    <tr id="track241"> \t \t \t \t \t \t \t 
 
     <td><div data-track-name="hate.mp3" id="play241"></div></td> 
 
     <td id="song-url241">hate</td> 
 
    </tr> 
 
    <tr id="track233"> \t \t \t \t \t \t \t 
 
     <td><div data-track-name="think.mp3" id="play233"></div></td> 
 
     <td id="song-url233">think</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<h3>Copied elements</h3> 
 
<div id="list-player-songs"></div> 
 

 
<hr/> 
 
<br/><br/><br/>

私はCLだ理由の理由元のテーブルの要素にバインドされた可能性のあるすべてのイベントハンドラを保持するために、追加する前に消去されたdivに追加する：です。