如何使用javascript动态命名表单元素

我正在PHP中编写html表单脚本。表格如表所示。每一行都是传递项的“集合”，将在一个$\u POST双数组中收集，其中第一个id是表行，第二个标识符是列，实际上是表单的变量

这里有一个例子

<?php
echo '<form><table>';
for ($i=1;$i<10;$i++){
echo '
   <tr>
       <td><input type="text" name="data[',$i,'][element1]></td>
       <td><input type="text" name="data[',$i,'][element2]></td>
       <td><input type="text" name="data[',$i,'][element3]></td>
       ...
       <td><input type="text" name="data[',$i,'][elementN]></td>
   </tr>';
}
echo '</table></form>';
?>

并显示如下内容：

data[1][element1] = element 1-1
data[1][element2] = element 1-2
...
data[1][elementN] = element 1-N
..
data[2][element1] = element 2-1
...
data[2][elementN] = element 2-N
... ... ... 
data[10][elementN] = element 10-N

function addRow() {
    var referenceNodes = document.getElementById("flightsTable").getElementsByTagName("tr");
    //-2 because last row is button row
    var referenceNode = referenceNodes[referenceNodes.length - 1];
    var newNode = referenceNode.cloneNode(true);

    // get the next count for the new row.
    var dataCount = referenceNodes.length + 1;

    // loop the cells.
    var cells = newNode.getElementsByTagName("td");
    for (var i = 0; i < cells.length; i++) {
        var cell = cells[i];

        // get the input (assuming only one).
        var input = cell.getElementsByTagName("input")[0];

        // set the name property.
        input.name = "data['" + dataCount + "'][element" + (i + 1) + "]";
    }

    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

我提出了这个想法……而且它非常有效。但是，我不希望显示所有10行以供输入，而是允许用户在需要时添加行

我发现这个javascript代码片段用于添加行，但是问题是我不知道如何动态地传递行ID，以允许我的$\u请求部分代码工作。事实上，此时，$\u请求只得到一行

<SCRIPT language="javascript">
    function addRow() {
        var referenceNodes = document.getElementById("flightsTable").getElementsByTagName("tr");
            //-2 because last row is button row
            var referenceNode = referenceNodes[referenceNodes.length - 1];
            var newNode = referenceNode.cloneNode(true);
            referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
        }
        document.getElementById("addNewRow").onclick = addRow;
</script>

函数addRow（）{
var referenceNodes=document.getElementById（“flightsTable”）.getElementsByTagName（“tr”）；
//-2因为最后一行是按钮行
var referenceNode=referenceNodes[referenceNodes.length-1]；
var newNode=referenceNode.cloneNode（true）；
referenceNode.parentNode.insertBefore（newNode，referenceNode.nextSibling）；
}
document.getElementById（“addNewRow”）.onclick=addRow；

显然，有一个id=addNewRow的按钮来启动javascript

如何将一个“计数器”从javascript传递到forms元素，以使每一新行增加它的name=“data[I][elementX]”

我可以接受其他方法来完成工作，如果更容易的话

---

谢谢

您可以循环

td

元素，然后找到输入。根据需要设置

name

属性

大概是这样的：

data[1][element1] = element 1-1
data[1][element2] = element 1-2
...
data[1][elementN] = element 1-N
..
data[2][element1] = element 2-1
...
data[2][elementN] = element 2-N
... ... ... 
data[10][elementN] = element 10-N

function addRow() {
    var referenceNodes = document.getElementById("flightsTable").getElementsByTagName("tr");
    //-2 because last row is button row
    var referenceNode = referenceNodes[referenceNodes.length - 1];
    var newNode = referenceNode.cloneNode(true);

    // get the next count for the new row.
    var dataCount = referenceNodes.length + 1;

    // loop the cells.
    var cells = newNode.getElementsByTagName("td");
    for (var i = 0; i < cells.length; i++) {
        var cell = cells[i];

        // get the input (assuming only one).
        var input = cell.getElementsByTagName("input")[0];

        // set the name property.
        input.name = "data['" + dataCount + "'][element" + (i + 1) + "]";
    }

    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

函数addRow（）{
var referenceNodes=document.getElementById（“flightsTable”）.getElementsByTagName（“tr”）；
//-2因为最后一行是按钮行
var referenceNode=referenceNodes[referenceNodes.length-1]；
var newNode=referenceNode.cloneNode（true）；
//获取新行的下一个计数。
var dataCount=referenceNodes.length+1；
//把细胞圈起来。
var cells=newNode.getElementsByTagName（“td”）；
对于（变量i=0；i

---

谢谢你，穆塞凡，这是一个有趣的解决方案，而且很有效。然而，也许我举了一个太简单的例子。事实上，这些元素不称为element1，2，…，但每个元素都有自己的名称（日期、名称、姓氏等），因此我应该只更改完整元素名称的一部分。并不是所有的输入都是“输入”单元格，但也有文本区、选择框和复选框。我可以以某种方式修改表单的结构，但是如果有更简单的方法来实现这个结果，我不想对表单进行太多的修改。无论如何，我会试试的。我终于成功了。然而，由于元素类型（输入或选择）和名称的不同，我删除了循环，并对每个单元进行了系统命名……它既不优雅也不时尚，但很有效。谢谢你的提示！