如何將文本框放在表數據中，哪些行已從另一表追加/移動？

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);

只需在last tr last td添加文本框，如下所示：

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

Answer 2

JQuery為您提供了幾種不同的方法來向頁面動態添加元素。 在這種情況下，如果要向td元素添加文本輸入，可以執行以下簡單操作：

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

您還可以使用各種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>

Answer 3

希望這可能有效，但是如果用戶從#table2刪除該row並將其放回去，它將不會記住在文本框中輸入的值。

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);
}

如果您對html5有很好的支持，則應該能夠使用number類型的輸入而不是純文本框。

另外，您可能想讓淡出/淡入淡出發生在行移動周圍。 您可以按以下方式實現它：

var row = $(this).closest('tr');
var table = $(this).closest('table');
row.fadOut(300, function(){
    row.detach();
    if (table.is("#table1")) {
        row.append('<td><input type="text" class="quantity" /></td>');
        row.find('.btn').html('remove');
        $("#table2").append(row);
    }
    else {
        row.find('td:last').remove();
        row.find('.btn').html('order');
        $("#table1").append(row);
    }
    row.fadeIn(300);
});