HTML表格点击添加行时上方行文本消失问题求助

你遇到的问题根源在于使用innerHTML +=来添加新行。当你这么做的时候，浏览器会把当前表格的HTML内容取出，拼接上新的行字符串，然后重新渲染整个表格——这意味着原来的输入框等元素会被销毁再重建，之前输入的文本自然就丢失了。

正确的做法是直接通过DOM API创建新的表格行和单元格，然后将它们追加到表格中，这样不会影响已有的元素和用户输入。下面是修正后的代码：

<div id="con">
  <table border="1" id="budgetMain">
    <tr>
      <th>Serial Number</th>
      <th>Description</th>
    </tr>
  </table>
</div>
<input type='button' value='Click Here' onClick='myFunc();' />
<script>
var serialNumber = 0;
function myFunc() {
  // 获取表格对象
  const table = document.getElementById("budgetMain");
  // 创建新行
  const newRow = document.createElement("tr");
  
  // 创建序号单元格并添加内容
  const serialCell = document.createElement("td");
  serialCell.textContent = ++serialNumber;
  newRow.appendChild(serialCell);
  
  // 创建描述输入框单元格
  const descCell = document.createElement("td");
  const input = document.createElement("input");
  input.type = "text";
  // 给每个输入框设置唯一id（可选，避免重复）
  input.id = `desc-${serialNumber}`;
  descCell.appendChild(input);
  newRow.appendChild(descCell);
  
  // 将新行追加到表格的tbody中（浏览器会自动为表格生成tbody）
  table.querySelector("tbody").appendChild(newRow);
}
</script>

• 原代码中所有输入框的id都是desc，这会导致HTML中id重复（id必须唯一），所以我改成了动态的desc-${serialNumber}，后续如果需要获取某个输入框的值也更方便。
• 使用DOM方法操作元素时，只会在现有DOM结构上添加新节点，不会破坏已有的元素和用户输入的内容，完美解决了文本消失的问题。

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