javascript - 如何将文本框放入表格数据中，其中的行已从另一个表格附加/移动？

Question

我的问题可能令人困惑，基本上我的订单中有两个表，一个连接到 mysql 数据库，显示我的库存商品，另一个(空)表是我所有选择的商品所在的地方。

图片:http://tinypic.com/r/o89pn5/8

现在，每次我点击顶部表格每行旁边的按钮时，它会将这些行转移到较低的表格

图片:http://tinypic.com/view.php?pic=290sfw2&s=8#.U7LMjpSSzTo

现在请注意在下方的表格中我还有另一列名为“数量”。谁能告诉我如何用文本框填充此列？非常感谢任何能帮助我的人。我只是开始学习 Javascript/JQuery。

如果我的问题不清楚，请随时问我更多问题。

表格代码:

 <!-- Table 1(inventory table) -->
<?php
    $con=mysqli_connect("localhost","root","","purchasing");
    if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }

    $result = mysqli_query($con,"SELECT * FROM tbl_inventory");

    echo "<table id='table1' class='inventory' border='3'>
    <tr>
    <th>Check</th>
    <th>ID</th>
    <th>Product Name</th>
    <th>Price</th>
    <th>Stock</th>
    </tr>";

    while($row = mysqli_fetch_array($result)) {
    echo "<tr>";
    echo "<td> <button class='btn'>order</button> </td>";
    echo "<td>" . $row['prod_id'] . "</td>";
    echo "<td>" . $row['prod_name'] . "</td>";
    echo "<td>" . $row['price'] . "</td>";
    echo "<td>" . $row['stock'] . "</td>";
    echo "</tr>";
    }

    echo "</table>";

    mysqli_close($con);
?>  
<br/><br/>
<!-- Table 2(ordered items table) -->
<table id="table2" class="inventory" border="3">
<tr>
    <th>Check</th>
    <th>ID</th>
    <th>Product Name</th>
    <th>Price</th>
    <th>Stock</th>
    <th>Quantity</th>
</tr>
<tbody>
</tbody>
</table>  

脚本:

<script>

$(".btn").click(function () {
// get the row containing this link 
var row = $(this).closest("tr");

// find out in which table it resides
var table = $(this).closest("table");

// move it
row.detach();

if (table.is("#table1")) {
    $("#table2").append(row);
}
else {
    $("#table1").append(row);
}

// draw the user's attention to it
row.fadeOut();
row.fadeIn();
});

</script>

Answer 1

在这一行之后:

$("#table2").append(row);

只需将文本框附加到最后一个 tr 最后一个 td 中，如下所示:

$("#table2").find("tr:last").find("td:last").append('<input type="text" class="quantity" />');