Question

我用来动态地向行添加行但是有问题的脚本的

在我的表单上，我想要使用脚本复制第一行。该行包含6个名为job_date1，tech_name1，cost_code1，pay_rate1，total_hours1和sub_total1的输入。

当通过脚本创建第二行时，我现在需要脚本设置的新行输入名称（如果可能）job_date2，tech_name2，cost_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);
        }
}

Answer 1

这是一个简单的解决方案：

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

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

Here's the jsFiddle（确保在运行该功能时检查控制台以查看控制台日志）。

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

chk1
txt1 
tech_name1 
cost_code1
txt1

对于创建的第二个元素

chk2
txt2 
tech_name2 
cost_code2
txt2

等

Answer 2

我有一个更简单的建议。不要使用job_date1，job_date2等，而是将字段命名为job_date[]（所有作业日期字段）。

E.g。 PHP会自动识别这一点，$_POST["job_date"]将是一个数组，其中包含作业日期的所有值，按照它们在html页面上显示的顺序。
因此，您可以使用$_POST["job_date" . $i]代替$_POST["job_date"][$i]。

我不知道你使用什么技术作为后端，但我相信你可以达到同样的效果。

它将更加强大和优雅，您不必在添加或删除行时重新编号。

编辑：有关PHP中此技术的更多详细信息，请参阅PHP FAQ和示例＃3 here。

我需要动态地向表单添加更多字段，并且新字段输入值也会更改

2 个答案: