javascript - 使用 "this"在表之间移动数据

Question

我正在开发一款游戏，其中有一个商店，有两个 div:“购买”部分和“结账”部分。第一个允许您选择不同的项目，然后使用每行的按钮将它们移动到“结帐”中。我的问题是我不确定如何将每个选定的行移动到第二个 div (结帐)。

例如:

<!-- Shop Buy -->
<div id="buy">
    <h3>Purchase</h3>
    <table id="buyTable">
        <th>Level Required</th><th>Item</th><th>Cost</th>
        <tr><td>Level 1</td><td><img src="img/shop/pickaxe_rusty.png" id="item1"></td><td>50 Gold</td><td class="moveToCheckout">&#8658;</td></tr>
        <tr><td>Level 10</td><td><img src="img/shop/pickaxe_iron.png" id="item2"></td><td>500 Gold</td><td class="moveToCheckout">&#8658;</td></tr>
        <tr><td>Level 25</td><td><img src="img/shop/pickaxe_steel.png" id="item3"></td><td>5000 Gold</td><td class="moveToCheckout">&#8658;</td></tr>
    </table>
</div> 

<td class="moveToCheckout">&#8658;</td>或 ⇒ 是用户单击以移动项目的内容。

<!-- Shop Checkout -->
<div id="checkout">
    <h3>Checkout</h3>
    <table>
        <th>Items</th><th>Quantity</th><th>Price</th>
        <tr><td><img src="" id=""></td><td><input type="text" value="1" id="quantity"><td>X Gold</td></td></tr>
    </table>
    <div id="checkoutBoxes">
        <span id="checkoutYes">&#10004;</span>
        <span id="checkoutNo">&#10008;</span>
    </div>
</div>

附加信息: 我为每个项目都有一个数组，其中包含其所有信息(成本、级别、img src)，是否可以使用它在结账部分创建一个新行并使用 for 循环将详细信息插入其中？

Answer 1

我不太明白你想要什么，但这样的东西看起来应该足够接近:

function buy(elem) {
  $(elem).parents('tr').appendTo("#co-table");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Shop Buy -->
<div id="buy">
  <h3>Purchase</h3>
  <table id="buyTable">
    <tr>
      <th>Level Required</th>
      <th>Item</th>
      <th>Cost</th>
    </tr>
    <tr>
      <td>Level 1</td>
      <td>
        <img src="img/shop/pickaxe_rusty.png" id="item1">
      </td>
      <td>50 Gold
        <button onclick="buy(this)">Buy</button>
      </td>
    </tr>
    <tr>
      <td>Level 10</td>
      <td>
        <img src="img/shop/pickaxe_iron.png" id="item2">
      </td>
      <td>500 Gold
        <button onclick="buy(this)">Buy</button>
      </td>
    </tr>
    <tr>
      <td>Level 25</td>
      <td>
        <img src="img/shop/pickaxe_steel.png" id="item3">
      </td>
      <td>5000 Gold
        <button onclick="buy(this)">Buy</button>
      </td>
    </tr>
  </table>
</div>

<!-- Shop Checkout -->
<div id="checkout">
  <h3>Checkout</h3>
  <table id="co-table">
    <tr>
      <th>Items</th>
      <th>Quantity</th>
      <th>Price</th>
    </tr>
    <tr>
      <td>
        <img src="" id="">
      </td>
      <td>X Gold</td>
      <td>
        <input type="text" value="1" id="quantity">
      </td>
    </tr>
  </table>
  <div id="checkoutBoxes">
    <span id="checkoutYes">&#10004;</span>
    <span id="checkoutNo">&#10008;</span>
  </div>
</div>