Append / 從 javascript / jQuery 的數據庫中復制帶有下拉值的表行

Question

我在表行中有一個來自數據庫的下拉值，

<button type="button" class="btn btn-outline-primary" id="addbutton">Add Item</button>
<table class="table" id="table">
      <thead>
        <tr>
          <th scope="col">Name</th>
        </tr>
      </thead>
      <tbody>
        <tr>
            <td>
            <select >
              <option selected="" disabled="">--Select Product Name--</option>
                <?php
                $con = new mysqli($host, $dbid, $dbpass, $dbname);
                $stmt = $con->prepare( "SELECT name FROM product ORDER BY name DESC" );
                $stmt->execute();
                $result = $stmt->get_result();
                $con->close();
                while($row = mysqli_fetch_assoc($result)) {
                  echo '<option value="'.$row["name"].'">'.$row["name"].'</option>';
                }
              ?>
            </select>
            </td>
        </tr>
        </tbody>
    </table>

如果我單擊添加按鈕，我想 append 具有相同下拉列表的行而不再次進行數據庫查詢（對於下拉值）。 我已經制作了 jQuery 來添加行

  $("#addbutton").click(function(){
    $('#table tr:last').after(' _??_ ');
  });

做這個的最好方式是什么？

Answer 1

您可以通過選擇包含select然后.clone()它的<tr>並使用.appendTo()來實現，您可以添加到表中，這是一個工作片段：

 $('#addbutton').click(function() { $('table tr:last-child').clone().appendTo($('table')) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button type="button" class="btn btn-outline-primary" id="addbutton">Add Item</button> <table class="table" id="table"> <thead> <tr> <th scope="col">Name</th> </tr> </thead> <tbody> <tr> <td> <select> <option selected="" disabled="">--Select Product Name--</option> <option selected="" disabled="">option1</option> <option selected="" disabled="">option2</option> <option selected="" disabled="">option3</option> <option selected="" disabled="">option4</option> </select> </td> </tr> </tbody> </table>