使用表中的jquery作为行动态添加时，表单标记放错了位置

Question

我正在尝试使用Jquery 1.3.2动态添加HTML表格作为表格行（请不要问为什么这么旧版本）。标签的层次结构应如下所示，因为我需要将表单添加为表格行。

<tr><form><td><input/></td><td><button/></td></form></tr>

我面临的问题是表单标签来自层次结构

<tr><form></form><td><input/></td><td><button/></td></tr>

我已经尝试了一些解决方案但不起作用。例如stackoverflow.com/questions/20000198

＆＃13;

＆＃13;

$('#addNewRow').click(function() {
  var form = '<tr id = "id_rowAdd"><form action="add" method="post" id="id_frmAdd">' +
    '<td><input type = "text" cssClass="" name="col1" id="id_col1"/></td>' +
    '<td><input type="submit" value="Add" name="addBtn" id="id_addBtn"/></td>' +
    '<td><input type="button" value="Delete" name="rowDeleteBtn" id="id_rowDeleteBtn"/></td></form></tr>';
  $('#scrollTable tr:first').before(form);

});

$('#id_rowDeleteBtn').click(function() {
  $('#id_rowAddFlight').remove();
});

＆＃13;

div.row_manipulator {
  float: left;
  background-color: #21405d;
  padding-left: 2%;
  padding-top: 0.5%;
  padding-bottom: 0.5%;
  padding-right: 2%;
}
div.row_manipulator a {
  color: #FCFF9D;
  font-family: sans-serif, "Courier New", monospace;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="table_holder" style="background: #21405d;width: 1228px;margin-top: 5px;">
  <div class="row_manipulator w11">
    <s:a href="#" id="addNewRow">Add New Row</s:a>
  </div>
  <div style="clear: left;">
    <table border="1" cellspacing="0" cellpadding="0" class="tbl1 scroll" id="scrollTable">
      <thead id="table_head">
        <tr>
          <th class="w11">Column 1</th>
          <th class="w11">Column 2</th>
          <th class="w11">Column 3</th>
        </tr>
      </thead>
    </table>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

点击＆＃34;添加行＆＃34;以下是Chrome开发者工具中 动态生成HTML的屏幕截图 。链接。

任何人都可以帮我指出我在这里可能做错了什么，我怎么能解决它？非常感谢。

Answer 1

虽然您可以在<form>内手动编写<tr>标签，但浏览器会允许它[1]，但在幕后它很复杂（浏览器正在为您调整内容）。 / p>

从技术上讲（W3C Spec），<tr>的唯一有效子项是<th>和<td>元素，因此当您尝试通过JavaScript添加表单时，浏览器是可能会抱怨。

TL; DR 您需要添加表单以包装整个<table>，或者将其添加到特定的<td>元素中。

[1]：Re＆＃39;允许＆＃39; - 浏览器接受＆＃39;它，但修改它使用的真正的DOM来克服这种无效的嵌套。