PHP中动态新增表格行的输入框无法显示默认值问题求助

大家好，我最近在做一个结合表格的小型HTML表单，表格里的name输入框默认值来自PHP变量$name，另外两个city和country输入框没有预设值。第一行的显示完全正常，但当我动态添加新行时，新生成的name输入框没法显示$name这个默认值，想请各位帮忙看看问题出在哪？

我的当前代码如下：

HTML部分 #

<html>
<body>
<table class="table table-bordered">
<thead class="table-success" style="background-color: #3fbbc0;">
<tr>
<th width="15%"><center>Name</th>
<th width="15%"><center>city</th>
<th width="15%"><center>country</th>
<th width="5%">
<button type="button" class="btn btn-sm btn-success" onclick="BtnAdd()">Add Item</button>
</th>
</tr>
</thead>
<tbody id="TBody">
<tr id="TRow" class="d-none">
<td>
<input type="text" name="name[]" id="name" value = "<?php echo $name; ?>">
</td>
<td>
<input type="text" name="city[]" id="city" >
</td>
<td>
<input type="text" name="country[]" id="country" >
</td>
<td class="NoPrint">
<button type="button" onclick="BtnDel(this)">x</button>
</td>
</tr>
</tbody>
</table>

JS部分 #

<script type="text/javascript">
function GetPrint()
{
/*For Print*/
window.print();
}
function BtnAdd()
{
/*Add Button*/
var v = $("#TRow").clone().appendTo("#TBody") ;
$(v).find("input").val('');
$(v).find("input").autocomplete({
source: 'backend-script.php'
});
$(v).removeClass("d-none");
$(v).find("th").first().html($('#TBody tr').length - 1);
}
function BtnDel(v)
{
/*Delete Button*/
$(v).parent().parent().remove();
GetTotal();
$("#TBody").find("tr").each(
function(index) {
$(this).find("th").first().html(index);
}
);
}
</script>

问题分析&解决方案 #

仔细看了你的JS代码，发现问题出在BtnAdd函数里的这一行：

$(v).find("input").val('');

你克隆完模板行后，直接把所有输入框的值都清空了，包括name输入框原本通过PHP渲染出来的$name默认值，所以新行的name框自然就空了。

这里给你两个简单的解决思路：

思路一：只清空需要的输入框

不需要全局清空所有input，只针对city和country输入框做清空操作，保留name的默认值：

// 替换原来的$(v).find("input").val('');
$(v).find("input[name='city[]'], input[name='country[]']").val('');

思路二：提前存储默认值，克隆后重新赋值

如果担心模板行的默认值被其他操作影响，可以先把$name的值存在模板行的自定义属性里，克隆后再给name输入框赋值：

1. 先修改模板行的HTML，添加自定义属性：

<tr id="TRow" class="d-none" data-default-name="<?php echo $name; ?>">

2. 然后修改BtnAdd函数：

function BtnAdd()
{
    /*Add Button*/
    const templateRow = $("#TRow");
    var v = templateRow.clone().appendTo("#TBody");
    
    // 清空所有输入框后，给name输入框重新赋值默认值
    $(v).find("input").val('');
    $(v).find("input[name='name[]']").val(templateRow.data('default-name'));
    
    $(v).find("input").autocomplete({
        source: 'backend-script.php'
    });
    $(v).removeClass("d-none");
    $(v).find("th").first().html($('#TBody tr').length - 1);
}

另外还有个小细节要注意：模板行里的input不要用固定的id（比如id="name"），因为克隆后页面会出现多个相同id的元素，这不符合HTML规范，建议直接去掉id属性，毕竟你已经用了数组形式的name（name[]），完全不影响表单提交~

备注：内容来源于stack exchange，提问作者Umar