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

Question

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

<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();
            }
        });
    });
    });
   

Answer 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();
            }
        });
    });