我需要動態地向表單添加更多字段，並且新字段輸入值也會更改

Question

我在這里有一個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);
        }
}

Answer 1

這是一個簡單的解決方案：

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

在計算每個新添加的行時，將該變量添加到每個輸入元素。

這是jsFiddle （確保在運行該函數時檢查控制台以查看控制台日志）。

對於第一個日志，它返回：

chk1
txt1 
tech_name1 
cost_code1
txt1 

對於創建的第二個元素

chk2
txt2 
tech_name2 
cost_code2
txt2 

等等

Answer 2

我有一個更簡單的建議。 而不是使用job_date1 ， job_date2等，將字段job_date[] （所有作業日期字段）。

例如，PHP會自動識別這一點，而$_POST["job_date"]將是一個數組，其中包含作業日期的所有值，按照它們在html頁面上顯示的順序。
所以而不是$_POST["job_date" . $i] $_POST["job_date" . $i]你會使用$_POST["job_date"][$i] 。

我不知道你使用什么技術作為后端，但我相信你可以達到同樣的效果。

它將更加強大和優雅，您在添加或刪除行時不必關心重新編號。

---

可以發現有關此技術在PHP中的更多細節：編輯 PHP常見問題和示例3 這里 。