Question

我在PHP中编写html表单脚本。表格显示为表格。每一行都是一套＆＃39;传递的项目将收集在 $ _ POST 双数组中，其中第一个ID是表 ROW ，第二个标识符是 COLUMNS ，实际上是表格的变量。

这是一个例子。

<?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>';
?>

＆＃34;聚会＆＃34;脚本的一部分只是：

$myFormInformation = $_REQUEST['data'];

并显示如下内容：

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

我提出了这个想法......它完美无缺。但是，我不希望显示所有输入的10行，而是授予用户在需要时添加行。

我发现这个javascript代码段可以添加行，但问题是我不知道如何动态传递 ROW ID 以允许我的$ _REQUEST部分代码工作。事实上， $ _ REQUEST 实际上只有一行。

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

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

如何通过＆＃34;计数器＆＃34;从javascript到表单元素，以便让每个新行增加 name =＆＃34; data [i] [elementX]＆＃34; 。

我可以接受其他方式完成工作，如果更容易......

谢谢！

Answer 1

您可以循环td元素，然后找到输入。根据需要设置name属性。

这样的事情：

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);
}

Here is a working example

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

1 个答案: