Javascript和表单复制问题

我有一个类似以下内容的HTML代码：

< tr id="500" >
 < form id="500" onsubmit="DoThis()">
  < td>Info< /td>
    etc...
    etc...
  < td>Info< /td>
 < /form> 
< /tr>

这段代码创建了一个新的副本，它就像一个放在桌面上的文件一样完美。问题是我无法提交任何内容，因为新元素已关闭其窗体： 现在看起来是这样的：

< tr id="500">
 < form id="500" onsubmit="DoThis()" />   <----- end tag on the form :/
  < td>Info< /td>
    etc...
    etc...
  < td>Info< /td>
< /tr>

信息
等
等
信息

有人知道我如何才能强制窗体不关闭，或者有其他解决此问题的方法吗

---

谢谢…

我认为您遇到了问题，因为您的HTML无效。表单不能是表行的子元素，它需要位于表元素内部。此外，不能同时为行和表单本身提供相同的id值。所有元素ID必须为和

因为我不确定你到底想做什么，所以很难知道该建议什么来解决它。您可以尝试在不使用表的情况下进行新的布局——除非您有表格数据，否则这可能是最好的方法。否则，您可以尝试将表单嵌套在一个表元素中，然后在此表单中创建一个实际包含列数据的表，不过您可能需要修改列宽，使其看起来像一个数据表

就id冲突而言，您可能希望在id前面加一个字符串，如“row_u”或“form_u”，以区分它们

---

如果您能提供更多关于您试图实现的目标的信息，我可能能够改进此答案。

我认为您遇到了问题，因为您的HTML无效。表单不能是表行的子元素，它需要位于表元素内部。此外，不能同时为行和表单本身提供相同的id值。所有元素ID必须为和

因为我不确定你到底想做什么，所以很难知道该建议什么来解决它。您可以尝试在不使用表的情况下进行新的布局——除非您有表格数据，否则这可能是最好的方法。否则，您可以尝试将表单嵌套在一个表元素中，然后在此表单中创建一个实际包含列数据的表，不过您可能需要修改列宽，使其看起来像一个数据表

就id冲突而言，您可能希望在id前面加一个字符串，如“row_u”或“form_u”，以区分它们

如果你能提供更多关于你正在努力实现的目标的信息，我也许能够改进这个答案。

我应该做什么： 我的桌子上有很多行。 这些行包含有关项目的信息。 这样说：

当用户从“datefield”中模糊出来时，Javascript将检查数据库中是否存在任何具有相同日期的项。（并非所有数据都在行中表示，有些数据仍在数据库中）

如果已经存在具有相同日期的项，我希望复制一个元素，并将其childelements的属性和值更改为我们发现已经存在的项

新行还应能够提交已编辑的数据

但是由于自动关闭，我无法提交任何数据

很难解释，但我希望你理解我应该做什么： 我的桌子上有很多行。 这些行包含有关项目的信息。 这样说：

当用户从“datefield”中模糊出来时，Javascript将检查数据库中是否存在具有相同日期的项目。（并非所有数据都在行中表示，有些数据仍在数据库中）

如果已经存在具有相同日期的项，我希望复制一个元素，并将其childelements的属性和值更改为我们发现已经存在的项

新行还应能够提交已编辑的数据

但是由于自动关闭，我无法提交任何数据

---

很难解释，但我希望您理解这里的许多问题

<tr id="500">
    <form id="500" onsubmit="DoThis()">

哪一个

var parent    = TrElement.parent;

应该是parentNode

var NewTr     = TrElement.cloneNode(true);
parent.appendChild(NewTr);

现在，您还有两个id=“500”的元素！在将克隆元素附加到文档之前，应更改其ID

这里有几种方法可以采用。如果所有表单字段都在单个单元格中，则可以将表单放在单元格中。但是，如果需要跨多个单元格的字段，则表单必须位于表之外

在这种情况下，您可以在整个表之外有一个表单，也可以有一个表单预行，每个预行包含一个单独的表单。您可以使用指定宽度的列和CSS规则“TableLayout:fixed”使所有表的列对齐

（您甚至需要表单吗？您的示例中可能缺少代码，但实际上您甚至没有使用表单提交到任何地方。如果您的页面应该是纯javascript的，您可以完全忽略表单，只需在按钮上单击事件即可。）

假设您确实需要多个表单，下面是一些示例代码：

<div>
    <form method="post" action="setThing.script" class="setform" id="setform-500">
        <table><tr>
            <td>Info</td>
            <td><input type="text" name="setting" value="" /></td>
            <td><input type="submit" value="Set" /></td>
        </tr></table>
     </form> 
</div>
<button id="addrow">Another one, please!</button>

<script type="text/javascript">
    function doThing() {
        alert('validating form or something');
        return false;
    }

    var rownum= 500;
    document.getElementById('setform-'+rownum).onsubmit= doThing;

    document.getElementById('addrow').onclick= function() {
        var f500= document.getElementById('setform-'+rownum);
        var fnew= f500.cloneNode(true);
        rownum++;
        fnew.id= 'setform-'+rownum;
        fnew.onsubmit= doThing;
        f500.parentNode.appendChild(fnew);
    }
</script>

信息
请再来一个！
函数doThing（）{
警报（“验证表单或某事”）；
返回false；
}
var-rownum=500；
document.getElementById（'setform-'+rownum）.onsubmit=doThing；
document.getElementById（'addrow'）。onclick=function（）{
var f500=document.getElementById（'setform-'+rownum）；
var fnew=f500.cloneNode（真）；
rownum++；
fnew.id='setform-'+rownum；
fnew.onsubmit=点状；
f500.parentNode.appendChild（fnew）；
}

这里有很多问题

<tr id="500">
    <form id="500" onsubmit="DoThis()">

哪一个

var parent    = TrElement.parent;

应该是parentNode

var NewTr     = TrElement.cloneNode(true);
parent.appendChild(NewTr);

现在，您还有两个id=“500”的元素！您应该在之前更改克隆元素的ID