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