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

Answer 2

试试这个：

$("button[name='add-me']").click(function(){
  var $image = $(this).closest("tr").prev("tr").find('img').clone();
  $('#div-test').html($image); 
});

从表中的不同行克隆图像

2 个答案: