JavaScript自动闭合form标签问题：表格行插入form后闭合标签位置异常

• 浏览器自动闭合form的核心原因是HTML规范限制：<tr>元素的合法子元素只能是<td>、<th>，你直接把<form>作为<tr>的子元素插入属于非法嵌套，浏览器解析HTML时会自动修正非法结构，直接提前闭合未合法放置的form标签，和你之前移除form的操作无关。
• 你的代码本身还有两处逻辑错误：
  1. row.innerHTML.replace("</fom>","")首先拼写错误（fom应为form），其次replace方法不会修改原字符串，你没有将返回值赋值回row.innerHTML，这行代码完全不生效。
  2. row.append("</form>")的append方法接收的是DOM节点或文本，传入字符串会被当做纯文本插入，不会被解析为HTML闭合标签。

推荐用HTML5原生的form属性实现表单和控件的关联，不需要把控件包在form标签内部，完全规避表格嵌套的合法性问题：

1. 先在页面任意合法位置（比如表格外）新增一个空form标签，设置好提交参数：

<form id="rowEditForm" action="mainsite.php?country=<?= $country?>" method="POST" enctype="multipart/form-data"></form>

2. 修改你的editRow函数，给所有需要提交的input、按钮都加上form属性，值为上面form的id：

function editRow(sequence){
  sequence -= 1;
  const table = document.getElementById("mainSiteTable");
  const row = document.getElementById("trSequence"+(sequence+1));
  // 序号输入框关联表单
  table.rows[sequence].cells[0].innerHTML = `<input form="rowEditForm" id="number" name="sequence" type="number" value="${sequence+1}">`;
  // 文本输入框关联表单，注意补充name属性否则无法提交
  table.rows[sequence].cells[2].innerHTML = `<input form="rowEditForm" type="text" name="yourFieldName" value="${table.rows[sequence].cells[2].innerHTML}">`;
  // 新增提交按钮也关联表单
  table.rows[sequence].cells[3].innerHTML += `<button form="rowEditForm" type="submit">保存</button>`;
}

如果需要同时支持多行编辑，给每个行的表单生成唯一的id即可。

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