如何在从下拉列表中选择一个选项时在表格中添加另一行？答案

【问题标题】：How do I add another row in the table on select an option from a drop down?如何在从下拉列表中选择一个选项时在表格中添加另一行？
【发布时间】：2016-06-05 05:40:54
【问题描述】：

这是我的桌子的样子：

这是我的代码：

    <table class="inventory" style="float:left;">
  <tbody>
    <tr>
        <th>Date bought</th>
      <th>Item</th>
      <th>Quantity</th>
      <th>Total</th>
      </tr>

    <tr>
        <td>
             <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <link rel="stylesheet" href="style.css">
        <script>
        $(document).ready(function() {
            $( "#datepicker" ).datepicker();
        });
        </script>
        <input type="text" id="datepicker"/>
        </td>
      <td>
          <select name="item_name_update" value="item_name_update" class="form-control ddplaceholder" style="width:220px; padding-left:40px;font-size:18px;font-family:Roboto;">
                   <option value="" disabled selected>Select Item</option>
            <?php
            $sth = $conn->prepare('Select item_name From item');
            $sth->execute();
            $data = $sth->fetchAll();   
            foreach ($data as $row ){
                if($row['item_name']!="")
             echo ' <option id=\"ItemName\" name=\"ItemName\" value="' .$row['item_name']. '">'.$row['item_name'].'</option>';
            }?>
            </select>
      </td>
      <td>
        <input type="text" placeholder="Quantity" name="Quantity" id="Quantity"/>
      </td>
      <td>
       <input type="text" placeholder="Total" value=""/>
      </td>
    </tr>
         <?php $totalCost="";
            if(!empty($_POST['item_name_update']) && !empty($_POST['datepicker']) && !empty($_POST['Quantity'])){
           $sth = $conn->prepare('Select price_per_unit From bill where item=:item and date=:date');
            $sth->execute(array(':item'=>$_POST['item_name_update'], ':date'=>$_POST['datepicker']));
            $data = $sth->fetchAll();   
            foreach ($data as $row ){
         $totalCost=($row['price_per_unit']*$_POST['Quantity']);
            }}
                ?>
  </tbody>
</table>

每次从下拉列表中选择一个项目时，我想在表格中添加一行。我怎么做？有一个简单的解决方案吗？是否添加循环并在选择下拉菜单中添加 document.change？

另外，我想添加所有文本框的总数。

编辑：

我在下面得到了一些添加新行的代码。但是当我从最新行的下拉列表中选择一个值时，应该添加新行。现在它正在添加仅选择第一个下拉列表。

【问题讨论】：

标签： php jquery html jquery-ui

【解决方案1】：

是的，我们可以使用insertAfter 方法来做到这一点。您应该通过

更改选择标记时调用它

$(function() {
   $("select").change(function() {
       $('<tr><td>new td1</td><td>new td2</td></tr>').insertAfter($(this).closest('tr'));
   });
});

希望对您有所帮助 :) 这是Jsfiddle

【讨论】：

您能告诉我在代码中的确切位置吗？
@VineetBasantani 我附上了 jsfiddle。
嘿，当第一行的下拉列表更改时，它会添加新行。但我想要的是当我从最新行的下拉列表中选择一个值时应该添加新行。

【解决方案2】：

使用此代码。

$(function() {$(".ddplaceholder").change(function() {
   $('<tr><td>new td1</td><td>new td2</td></tr>').insertAfter($(this).closest('tr')); }); });

【讨论】：

您能否使用 CTRL-K 或 {} 按钮正确缩进您的代码？也包括一些解释！
嘿，当第一行的下拉列表更改时，它会添加新行。但我想要的是当我从最新行的下拉列表中选择一个值时应该添加新行。