javascript - 从表中的不同行克隆图像

Question

我这里有这个表结构:

<table id="all-prods" class="table bordered">
  <tbody>    
    <tr class="product">
      <td>
        <img src="test" />
      </td>
      <td>Product Title</td>
      <td style="text-align:right">
        <button type="button" name="click_me">Check out the Variants!</button>
      </td>
    </tr>
    <tr style="display:none">
      <td><b>Variant:</b></td>
      <td><b>Price:</b></td>
      <td><b>Quantity:</b></td>
    </tr>
    <tr class="table-odd" style="display:none">
      <td>Variant title</td>
      <td>Variant price</td>
      <td style="text-align:right;">
        <input id="variant-x" class="quantity field"/>
        <button style="text-align:right" type="button" name="addItem">Add</button>
      </td>
    </tr>
  </tbody>
</table>

它被设计为每个产品 1 行，每个变体都有子行。 该表的内容正在被克隆到此表中:

<table id="items" class="table bordered hidden">
  <thead>
    <tr>
      <th>Item image:</th>
      <th>Item:</th>
      <th>Price:</th>
      <th>Quantity:</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

我可以在此处使用此脚本克隆变体的数据:

<script>
  var clone = $(this).closest('tr').clone(true);
  clone.appendTo('#items tbody');
</script>

问题是..我找不到将产品图像复制为第二个表中的第一列的方法。

我已经尝试过:已更新 JSFiddle link方法，但似乎我找不到该元素。

更新 目前的脚本如下所示:

$("button[name='addItem']").click(function(){
    var clone = $(this).closest('tr').clone(true);
    var img = $(this).closest('tr').prev('tr').find('img').clone(true);
    img = img.wrap("<td></td>");
    img.prependTo(clone);
    clone.appendTo('#items tbody');
  })

有人可以帮忙吗？

Answer 1

prev() 方法检查前一个元素。使用 prevAll('.product:first') 获取产品行引用，然后使用 find('img')[0].outerHTML 到 img 的 html.尝试如下。

$("button[name='addItem']").click(function () {
    var clone = $(this).closest('tr').clone();
    clone.prepend('<td>' + $(this).closest('tr').prevAll('.product:first').find('img')[0].outerHTML + '</td>')
    clone.appendTo('#wholesale-items tbody');
})

<强> DEMO