添加表格行，表格数据包含从数据库填充的下拉列表

Posted 2023-05-09

【中文标题】添加表格行，表格数据包含从数据库填充的下拉列表

【英文标题】：Add table row , table data contain drop down which populate from database

【发布时间】：2021-10-25 22:41:00

【问题描述】：

添加包含类别、项目、尺寸、价格的新表格行。我能够添加一个新行，但不确定如何从数据库中填充下拉数据。我必须获取第一行的数据。这是我的代码。

<tbody>
<tr>
<td><input type="checkbox" name="record"></td>
<td>
<select id="catid" name="catid[]">
<option value="">Select Category</option>
<?php
$getcatid = "SELECT catid,catname FROM category";
$result = mysqli_query($conn,$getcatid);
while($row = mysqli_fetch_array($result)) ?>
<option value="<?php echo $row['catid']; ?>"><?php echo $row['catname']; ?></option>
<?php  ?>
</td>
<td>
<select id="itemid" name="itemid[]">
<option value=''>Select Item</option>
</select>
</select>
</td>
<td>
<select id="msr" name="msr[]" onchange="showPrice(document.cument.getElementById('itemid').value,this.value)">
<option value=''>Measurement</option> 
</select>
</td>
<td><div  id="price"><input type="text" name="price[]"></div></td>
<td><input type="text" name="qty[]"></td>
<td><input type="text" name="total[]"></td>
</tr>                           
</tbody>

这是我添加和删除行的脚本

$(document).ready(function()
    $("#add-row").click(function()
        
    var markup = "<tr><td><input type='checkbox' name='record'></td><td><select name='proid' id='proid'></select></td><td><select></select></td><td><select></select></td><td><input type='text name=''></td><td><input type='text' name=''></td><td><input type='text name=''></td></tr>";
        $("table tbody").append(markup);
    );
    
    // Find and remove selected table rows
    $("#delete-row").click(function()
        $("table tbody").find('input[name="record"]').each(function()
          if($(this).is(":checked"))
                $(this).parents("tr").remove();
            
        );
    );
    );
   

【问题讨论】：

请帮帮我。

只在 jquery 中使用克隆。它将克隆下拉列表。

【参考方案1】：

试试这个代码。

你需要在 jquery 中使用clone()。

这是 jquery 脚本和添加的工作小提琴链接。 Fiddle Link

    $(document).on("click","#add-row", function()

        var markup = $("table tbody>tr:last").clone();

        $("table tbody").append(markup);
    );
    

    
    // Find and remove selected table rows

    $(document).on("click","#delete-row", function()
        $("table tbody").find('input[name="record"]').each(function()
          if($(this).is(":checked"))
                $(this).parents("tr").remove();
            
        );
    );

【讨论】：

它将再次添加整个表体。如何只添加最后一行。

你要克隆最后一行还是第一行？

仅上一行。您的代码有效，但它会再次添加所有行。

@kajol，答案已更新。只需更改此行 var markup = $("table tbody>tr:last").clone();