我有一个 table
,其中一些tr
元素每个都有唯一的ID。
现在,我需要在新的Div list-player-songs
中复制所有这些元素,然后更改所有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">
<td><div data-track-name="love.mp3" id="play251"></div></td>
<td id="song-url251">love</td>
</tr>
<tr id="track241">
<td><div data-track-name="hate.mp3" id="play241"></div></td>
<td id="song-url241">hate</td>
</tr>
<tr id="track233">
<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>
拿(:
)
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">
<td><div data-track-name="love.mp3" id="play251"></div></td>
<td id="song-url251">love</td>
</tr>
<tr id="track241">
<td><div data-track-name="hate.mp3" id="play241"></div></td>
<td id="song-url241">hate</td>
</tr>
<tr id="track233">
<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/>
我为什么要克隆它并附加到附加之前清洁的div的原因:保留所有可能将所有可能的事件处理程序保留到原始表的元素。
。