Question

我有一个类似的HTML代码：

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

我在Javascript中尝试做的是制作元素的副本并将其添加到父表中：

var TrElement = document.getElementById（“500”）

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

这段代码创建了一个完美无缺的新副本。问题是我无法提交任何内容，因为新元素已关闭其形式：它现在看起来像这样：

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

有人知道我怎么能强迫表格不要关闭，或者有另一个解决这个问题的方法吗？

...谢谢

Answer 1

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

由于我不确定你要做什么，所以很难知道要解决它的建议。您可以尝试在不使用表的情况下进行新布局 - 除非您有表格数据，这可能是要走的路。否则，您可以尝试将表单嵌套在表元素中，然后在此表单中包含一个实际包含柱状数据的表，尽管您可能必须将此列的宽度修改为单个数据表。 / p>

就id冲突而言，您可能希望在id之前添加类似“row_”或“form_”的字符串以区分它们。

如果您可以提供有关您要完成的内容的更多信息，我可以改进此答案。

Answer 2

这里有很多问题。

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

您不能以数字开头的'id'。您不能在同一文档中使用两个相同的“id”值。你不能拥有＆lt; form＆gt;直接在＆lt; tr＆gt;里面，这就是造成问题的原因。对我来说，即使是第一种形式也行不通。

var TrElement = document.getElementById("500")

哪一个？

var parent    = TrElement.parent;

应该是parentNode。

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

你现在有另一个两个id =“500”的元素！您应该在将克隆元素附加到文档之前更改它们的ID。

您可以在这里采取一些方法。如果所有表单域都在单个单元格中，则可以将表单放在单元格内。但是，如果您需要跨多个单元格的字段，那么表单必须超出表格。

在这种情况下，您可以在整个表格之外使用单个表单，也可以在预行之前使用一个表单，每个表单都包含一个单独的＆lt; table＆gt;。您可以使用指定宽度列和CSS规则“table-layout：fixed”使所有表的列对齐。

（你甚至需要一个表格吗？你的例子中可能缺少代码，但因为你甚至没有使用表单提交到任何地方。如果你的页面应该是纯粹的javascript，你可以完全省略表单，只需在按钮上放置onclick事件。）

假设您确实需要多个表单，这里有一些示例代码：

<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>

Answer 3

我该怎么做：我的桌子上有很多行。这些行包含有关项目的信息。这样说：＆LT; TD＆GT;＆LT; input type =“text”id =“item_”＆gt;
＆lt; input type =“text”id =“date_
＆LT;输入类型=“提交”值=“提交”/＆gt;

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

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

新行也应该能够提交已编辑的数据。

但是因为＆lt;形式＆GT;关闭自己，我无法提交任何数据。

很难解释，但我希望你理解

Javascript和表单重复的问题

3 个答案: