Javascript 如何将文本框放在表数据中，哪些行已从另一个表中追加/移动？

我的问题可能会让人困惑，基本上我的订单中有两个表，一个连接到mysql数据库，显示我的库存物品，另一个（空）表是我所有选择的物品的存放位置

图片：

现在，每次我单击顶部表格中每一行旁边的按钮，它都会将这些行转移到下部表格中

图片：

现在注意下表中的另一列名为“Quantity”。有人能告诉我如何用文本框填充这一列吗？非常感谢任何能帮助我的人。我只是开始学习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>

$（“.btn”）。单击（函数（）{
//获取包含此链接的行
var行=$（此）.tr；
//找出它所在的表
var table=$（此）；
//移动它
row.detach（）；
如果（表1）{
$（“#表2”）。追加（第行）；
}
否则{
$（“#表1”）。追加（第行）；
}
//吸引用户的注意力
row.fadeOut（）；
row.fadeIn（）；
});

在这一行之后：

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

只需在last

tr

last

td

中添加文本框，如下所示：

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

<script>
$('table#table2 td.quantity').append('<input type="text" name="quantity" id="quantity" value="0" />");
</script>

$（“#表2”）.find（“tr:last”）.find（“td:last”）.append（“”）；

在这一行之后：

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

只需在last

tr

last

td

中添加文本框，如下所示：

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

<script>
$('table#table2 td.quantity').append('<input type="text" name="quantity" id="quantity" value="0" />");
</script>

$（“#表2”）.find（“tr:last”）.find（“td:last”）.append（“”）；

JQuery为您提供了几种不同的方法来动态地向页面添加元素。在这种情况下，如果要向td元素添加文本输入，可以执行以下简单操作：

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

<script>
$('table#table2 td.quantity').append('<input type="text" name="quantity" id="quantity" value="0" />");
</script>

$（'table#table2td.quantity'）。追加（'”）；

您还可以使用各种JQuery方法构建元素，然后直接将元素附加到JQuery对象：

<script>
  var inputObj = $('<input />');
  inputObj.attr('type','text').val('0').attr('name','quantity').attr('id','quantity');
  $('table#table2 td.quantity').append( inputObj );
</script>

var inputObj=$（''）；
inputObj.attr（'type'，'text'）.val（'0'）.attr（'name'，'quantity'）.attr（'id'，'quantity'）；
$（'table#table2td.quantity'）。追加（inputObj）；

JQuery为您提供了几种不同的方法来动态向页面添加元素。在这种情况下，如果您想向td元素添加文本输入，可以执行以下简单操作：

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

<script>
$('table#table2 td.quantity').append('<input type="text" name="quantity" id="quantity" value="0" />");
</script>

$（'table#table2td.quantity'）。追加（'”）；

您还可以使用各种JQuery方法构建元素，然后直接将元素附加到JQuery对象：

<script>
  var inputObj = $('<input />');
  inputObj.attr('type','text').val('0').attr('name','quantity').attr('id','quantity');
  $('table#table2 td.quantity').append( inputObj );
</script>

var inputObj=$（''）；
inputObj.attr（'type'，'text'）.val（'0'）.attr（'name'，'quantity'）.attr（'id'，'quantity'）；
$（'table#table2td.quantity'）。追加（inputObj）；

希望这能起作用，但如果用户从

#table2

中删除

行并稍后将其放回，则不会记住文本框中输入的值

if (table.is("#table1")) {
    row.append('<td><input type="text" class="quantity" /></td>');
    $("#table2").append(row);
}
else {
    row.find('td:last').remove();
    $("#table1").append(row);
}

希望这能起作用，但如果用户从
表2中删除
行
，然后将其放回，它就不会记得文本框中放了哪个值

if (table.is("#table1")) {
    row.append('<td><input type="text" class="quantity" /></td>');
    $("#table2").append(row);
}
else {
    row.find('td:last').remove();
    $("#table1").append(row);
}

与其用图像显示html，不如用fiddle；与其用图像显示html，不如用fiddle。我认为，你还需要处理另一种情况。除非行自动截断以适合较小的表，当该行从表2移回表1时，您应该删除额外的列。OP提到该行将移回上表时，我自己制作了一个anwser，也许您会明白我的意思。@didierc table1没有数量列您还需要处理其他情况，我认为。除非行被自动截断以适合较小的表，否则当行从表2移回表1时，您应该删除额外的列。OP提到的行将移回上表我自己做了一个anwser，也许你会明白我的意思。@didierc table1没有Quantity列这可能太多了，但如果你告诉我可以将代码放在哪里，可以吗？我首先尝试简单地复制它，但当我单击按钮时什么也没有发生，然后我对它进行了一些修改，然后文本框出现在表的底部，而不是数量列中。非常感谢您的回答：）您已经通过
行
变量获得了一个很好的tr参考。在调用
row.detach（）
之后，我将使用row变量作为上下文进行append调用。类似于
$（'td:last'，row.append（''）。基本上，您需要确保在附加输入时选择了正确的td。您可能会考虑向TD添加一个CSS类，它将包含数量输入以使其更简单。这可能太多了，但如果您告诉我在哪里可以放置代码，可以吗？我首先尝试简单地复制它，但当我单击按钮时什么也没有发生，然后我对它进行了一些修改，然后文本框出现在表的底部，而不是数量列中。非常感谢您的回答：）您已经通过
行
变量获得了一个很好的tr参考。在调用
row.detach（）
之后，我将使用row变量作为上下文进行append调用。类似于
$（'td:last'，row.append（''）。基本上，您需要确保在附加输入时选择了正确的td。您可能会考虑向TD添加一个CSS类，它将包含数量输入，以使这更容易。我尝试了您的代码，它几乎在那里，我只是遇到了一个问题。每次我从下表中删除一行时，都会发生这种情况：tinypic.com/r/if7sy0/8请注意红色箭头。在最后一个td旁边添加一个额外的列或空格。知道是什么原因吗？现在应该可以了：我在上一个
td
中没有使用
输入进行测试。好的，这正是我想要的！非常感谢你救了我。我试过你的代码并成功了