Javascript 我需要动态地向表单添加更多字段，并使新字段的输入值也发生更改

我用来向字段动态添加行的脚本，但有一个问题

在我的表单上，我有第一行要用脚本复制。该行由6个输入组成，分别命名为

作业日期1

，

技术名称1

，

成本代码1

，

工资率1

，

总时数1

，以及

子总时数1

当通过脚本创建第二行时，我现在需要脚本设置新行输入名称，如果可能的话，可以设置为

job\u date2

、

tech\u name2

、

cost\u code2

，等等。创建每一行后，我需要将结束数字上移一位

代码如下：

function addRow(tableID) {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount); 
        var colCount = table.rows[0].cells.length;

        for(var i=0; i<colCount; i++) { 
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[0].cells[i].innerHTML;

            switch(newcell.childNodes[0].type) {
                case "text":
                        newcell.childNodes[0].value = "";
                        break;
                case "checkbox":
                        newcell.childNodes[0].checked = false;
                        break;
                case "select-one":
                        newcell.childNodes[0].selectedIndex = 0;
                        break;
            }
        }
}

function deleteRow(tableID) {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null !== chkbox && true === chkbox.checked) {
                if(rowCount <= 1) {
                    alert("Cannot delete all the rows.");
                    break;
                }
                table.deleteRow(i);
                rowCount--;
                i--;
            } 
        }
        } 
        catch(e) {
            alert(e);
        }
}

函数addRow（tableID）{
var table=document.getElementById（tableID）；
var rowCount=table.rows.length；
var row=table.insertRow（rowCount）；
var colCount=table.rows[0].cells.length；
对于（var i=0；i，这里有一个简单的解决方案：

newcell.children[0].name = newcell.children[0].name + rowCount;

在计算每个新添加的行时，将该变量添加到每个输入元素中

（请确保在运行函数时检查控制台以查看控制台日志）

对于第一个日志，它返回：

chk1
txt1 
tech_name1 
cost_code1
txt1 

对于创建的第二个元素

chk2
txt2 
tech_name2 
cost_code2
txt2 

等等。
我有一个更简单的建议。不要使用
job\u date1
，
job\u date2
等，而是将您的字段命名为
job\u date[]
（所有的工作日期字段）

例如，PHP会自动识别这一点，
$\u POST[“job\u date”]
将是一个数组，其中包含job date的所有值，按它们在html页面上出现的顺序排列。
因此，您将使用
$\u POST[“job\u date”][$i]
而不是
$\u POST[“job\u date”]

我不知道你在后端使用什么技术，但我相信你也能达到同样的效果

它将更加健壮和优雅，并且在添加或删除行时不必关心重新编号


编辑：有关PHP中此技术的更多详细信息，请参见示例#3。
将
onLoad
更改为
no wrap-in
。@Zenith感谢现在的小提琴手works@Zenith实际的问题是，我需要随着创建的每一行更改字段输入值。@Zenith感谢我看到编辑我只是在做t他用同样的方法来澄清这个问题，那么我会把变量从$item_qty1=$POST['item_qty1']；$item_qty2=$POST['item_qty2']；$item_qty3=$POST['item_qty3']；改为$item_qty=$POST['item_qty'][$I]；我不需要指定qty1、qty2等等？这相当于
$item_qty1=$POST['itemqty2'.$POST['['item_qty2']；
将是
$item_qty1=$$u POST['item_qty'][1]；$item_qty2=$$u POST['item_qty'][2]；
。您可以处理
$$u POST['item_qty']
作为一个数组。我已经添加了指向文档的链接，您可以在其中查看用法。这很好，但我想问您，是否可以删除“添加”和“删除”按钮，然后使用复选框添加和删除行？因此，如果我已设置了默认行并选中该复选框，则将添加另一行，并使用复选框添加一个行，然后将签入该复选框将添加另一个复选框，以此类推，从上一行中删除复选框将删除它后面的行？或者可能是单选按钮？有点像一个切换！不管怎样，正如您在JSFIDLE中看到的那样，我已经找到了仅使用复选框的解决方案。实际上，我对脚本有问题，我还需要能够传递输入“id”我有一个脚本，它根据输入的“id”名称汇总输入。