Question

我有table个tr元素，每个元素都有唯一的ID。

现在，我需要在新的div list-player-songs中复制所有这些元素，并更改所有tr ID添加前缀。

在下面的代码段中，我做了但是如何更改添加前缀的tr元素的所有ID？只需将<tr id="track251">更改为<tr id="my_track251">。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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">							
      <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的原因是：保留所有可能绑定到原始表格元素的事件处理程序。

如何复制表并更改div中添加jQuery前缀的所有id？

1 个答案: