3

我在这里有一个脚本的 jsfiddle，我用它来动态地将行添加到字段但有问题。

在我的表单上，我有第一行我想用脚本复制。该行包含 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);
        }
}
4

2 回答 2

2

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

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

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

这是 jsFiddle（运行该函数以查看控制台日志时，请务必检查您的控制台）。

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

chk1
txt1 
tech_name1 
cost_code1
txt1

对于创建的第二个元素

chk2
txt2 
tech_name2 
cost_code2
txt2

等等

于 2013-06-01T21:55:58.230 回答
2

我有一个更简单的建议。不要使用job_date1,job_date2等命名您的字段job_date[]（所有工作日期字段）。

例如，PHP 会自动识别这一点，并且$_POST["job_date"]会是一个数组，其中包含作业日期的所有值，这些值按照它们在 html 页面上出现的顺序排列。
因此，$_POST["job_date" . $i]您将使用$_POST["job_date"][$i].

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

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

编辑：关于 PHP 中这种技术的更多细节可以在PHP FAQ和 Example #3 here中找到。

于 2013-06-01T22:00:39.670 回答