Append / 从 javascript / jQuery 的数据库中复制带有下拉值的表行

Question

I have a dropdown value from database in table row,

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

if I click add button, I want to append the row that have same dropdown without make a database query again (for a dropdown value). I have make jQuery to add row

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

what is the best way to do this?

Answer 1

You can have implemented by selecting the <tr> that contains the select then .clone() it and using .appendTo() you can have added to the table, here is a working snippet:

 $('#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>