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

如果我单击添加按钮，我想附加具有相同下拉列表的行而不再次进行数据库查询（对于下拉值）。我让 jQuery 添加行

  $("#addbutton").click(function(){

    $('#table tr:last').after(' _??_ ');

  });

做这个的最好方式是什么？

Answer 1

您可以通过选择包含<tr>然后select它.clone()并使用.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>