如何实现新增表格行时输入框为空白状态？

你的核心问题是克隆行时会复制原有输入框的value属性，同时原代码的HTML结构存在规范问题（表头重复渲染、ID重复），以下是针对性的解决方案：

步骤1：修正HTML结构 #

将表头移出循环避免重复渲染，把输入框的name改为数组形式（方便后台接收多行数据），移除重复的id（页面ID必须唯一）：

<form action="Fruits" method="Post" enctype="multipart/form-data">
    <table id="myTable">
        <!-- 表头仅渲染一次，移出循环 -->
        <thead>
            <tr>
                <th>Fruit</th>
                <th>Color</th>
            </tr>
        </thead>
        <tbody>
            <!-- 循环渲染已有数据行 -->
            <c:forEach items="${fruits}" var="val">
                <tr>
                    <td><input type="text" name="name[]" value="${val.name}"></td>
                    <td><input type="text" name="color[]" value="${val.color}"></td>
                </tr>
            </c:forEach>
        </tbody>
    </table>
    <button type="button" class="btn btn-default json-editor-btn-add" onclick="myFunction()">Add</button>
</form>

步骤2：修改JavaScript函数，克隆后清空输入框 #

只克隆tbody内的数据行作为模板，克隆完成后清空所有输入框的值：

function myFunction(){
    var table = document.getElementById("myTable");
    // 获取tbody内的第一行作为克隆模板
    var templateRow = table.querySelector("tbody tr");
    if (!templateRow) return;
    
    // 深度克隆行（包含所有子元素）
    var newRow = templateRow.cloneNode(true);
    
    // 清空新行内所有输入框的value
    var inputs = newRow.querySelectorAll("input");
    inputs.forEach(input => input.value = "");
    
    // 将新行追加到tbody末尾
    table.querySelector("tbody").appendChild(newRow);
}

原代码问题说明 #

1. 原HTML将<thead>放在循环内部，会导致表头被重复渲染，不符合表格结构规范
2. 克隆的是整个表头和tbody元素，每次新增都会多出一个表头，且继承原有输入框的值
3. 输入框id重复，会导致后续JS选元素或样式控制出现异常

修改后，点击Add按钮新增的行输入框均为空白状态，同时HTML结构更规范，后台也能正确接收多行提交数据。

内容的提问来源于stack exchange，提问作者cruzzy