将输入字段动态添加到列中

我用javascript编写了这段代码，它确实添加了动态输入字段。在这一点上，每件事都很好。我的问题是，如何在其他单元格的表中分别添加更多的输入字段和村庄名称输入字段？当用户Add Village 1/Remove Village 1时，任一操作都应在名为"参与式森林管理类型"、"参与式管理过程开始年份"answers"森林规模"的列上添加/删除对齐输入字段。上述列的输入字段增量应反映村名列的动态输入字段增量。稍后，我将使用带有Php的动态输入字段将值发送到数据库。谢谢你抽出时间！

下面是脚本：

脚本代码：

    <script language="JavaScript" type="text/javascript">
function getById(e){return document.getElementById(e);}
function newElement(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}
function addForestName()
{
    var tbl = getById('tblSample'); //note the single line generic functions written above
    var lastRow = tbl.rows.length;
    // if there's no header row in the table, then iteration = lastRow + 1
    var iteration = lastRow;
    var row = tbl.insertRow(lastRow);
    // Column which has iteration count
    var cell_no = row.insertCell(0);
    var textNode = newTxt(iteration);
    cell_no.appendChild(textNode);
    // Column which has the forest name
    var frstNameCell = row.insertCell(1);
    var el_input = newElement('input'); //create forest name input
    el_input.type = 'text';
    el_input.name = 'forest_text_' + iteration;
    el_input.id = 'forest_text_' + iteration;
    el_input.size = 40;
    frstNameCell.appendChild(el_input); 
    // Column which has the village name
    var villageNameCell = row.insertCell(2);
    var el_label = newElement('label');
    el_label.for = 'village_text_' + iteration + '_1';
    var el_labelValue = '1.';
    textNode = newTxt(el_labelValue);
    el_label.appendChild(textNode);
    villageNameCell.appendChild(el_label);
    el_input = newElement('input');
    el_input.type = 'text';
    el_input.name = 'village_text_' + iteration + '_1';
    el_input.id = 'village_text_' + iteration + '_1';
    el_input.size = 40;
    villageNameCell.appendChild(el_input);     
    el_btn = newElement('input'); //create village name add button
    el_btn.type = 'button';
    el_btn.name = 'village_btn_' + iteration;
    el_btn.id = 'village_btn_' + iteration;
    el_btn.value = 'Add Village Forest ' + iteration;
    el_btn.addEventListener('click',addMoreVillageNames, false);
    villageNameCell.appendChild(el_btn);
    el_btn = newElement('input'); //create village name remove button
    el_btn.type = 'button';
    el_btn.name = 'village_rembtn_' + iteration;
    el_btn.id = 'village_rembtn_' + iteration;
    el_btn.value = 'Remove Village Forest ' + iteration;
    el_btn.addEventListener('click',removeVillageName, false);
    villageNameCell.appendChild(el_btn);

    var frstManagCell = row.insertCell(3); // create forest management input
    el_input = newElement('input');
    el_input.type = 'text';
    el_input.name = 'frstManage_text_' + iteration + '_1';
    el_input.id = 'frstManage_text_' + iteration + '_1';
    el_input.size = 40;
    frstManagCell.appendChild(el_input);

    var yerPartCell = row.insertCell(4); // create year participatory input
    el_input = newElement('input');
    el_input.type = 'text';
    el_input.name = 'yrPart_text_' + iteration + '_1';
    el_input.id = 'yrPart_text_' + iteration + '_1';
    el_input.size = 40;
    yerPartCell.appendChild(el_input);  

    var frstSizeCell = row.insertCell(5); // create forest size input
    el_input = newElement('input');
    el_input.type = 'text';
    el_input.name = 'frstSize_text_' + iteration + '_1';
    el_input.id = 'frstSize_text_' + iteration + '_1';
    el_input.size = 40;
    frstSizeCell.appendChild(el_input);  

}
function addMoreVillageNames(){
    rowNumber = (this.id).substring((this.id.length)-1, this.id.length); //to get Row Number where one more input needs to be added.
    var childElCount;
    var parentCell = this.parentNode;
    var inputCount = parentCell.getElementsByTagName('label').length; //to get the count of input fields present already
    var newFieldNo = inputCount + 1; //input current count by 1 to dynamically set next number for the new field
    //temporarily remove the add and remove buttons to insert the new field before it.we are doing this loop only twice because we know the last 2 input elements are always the two buttons
    for (var i=0; i<2; i++){
        childElCount = parentCell.getElementsByTagName('input').length; //get count of child input elements (including text boxes);
        parentCell.removeChild(parentCell.getElementsByTagName('input')[childElCount-1]);
    }
    var lineBreak = newElement('br');
    parentCell.appendChild(lineBreak); //add a line break after the first field
    var el_label = newElement('label');
    el_label.for = 'village_text_' + rowNumber + '_' + newFieldNo;
    var el_labelValue = newFieldNo + '.';
    var textNode = newTxt(el_labelValue);
    el_label.appendChild(textNode);
    parentCell.appendChild(el_label); //create and add label
    var el_input = newElement('input');
    el_input.type = 'text';
    el_input.name = 'village_text_' + rowNumber + '_' + newFieldNo;
    el_input.id = 'village_text_' + rowNumber + '_' + newFieldNo;
    el_input.size = 40;
    parentCell.appendChild(el_input); //create and add input field
    var el_btn = newElement('input'); //add the village name add button again
    el_btn.type = 'button';
    el_btn.name = 'village_btn_' + rowNumber;
    el_btn.id = 'village_btn_' + rowNumber;
    el_btn.value = 'Add Village ' + rowNumber;
    el_btn.addEventListener('click',addMoreVillageNames, false);
    parentCell.appendChild(el_btn);
    el_btn = newElement('input'); //create village name remove button
    el_btn.type = 'button';
    el_btn.name = 'village_rembtn_' + rowNumber;
    el_btn.id = 'village_rembtn_' + rowNumber;
    el_btn.value = 'Remove Village ' + rowNumber;
    el_btn.addEventListener('click',removeVillageName, false);
    parentCell.appendChild(el_btn);
}

function removeForestName()
{
  var tbl = document.getElementById('tblSample');
  var lastRow = tbl.rows.length;
  if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
function removeVillageName()
{
    var rowNumber = (this.id).substring((this.id.length)-1, this.id.length); //to get Row Number where one more input needs to be added.
    var parentCell = this.parentNode;
    var lblCount = parentCell.getElementsByTagName('label').length;
    var inputCount = parentCell.getElementsByTagName('input').length;
    var brCount = parentCell.getElementsByTagName('br').length;
    //Remove will not happen if there is only one label-input combo left.
    if(lblCount>1)
    parentCell.removeChild(parentCell.getElementsByTagName('label')[lblCount-1]);
    if(inputCount>3)
    parentCell.removeChild(parentCell.getElementsByTagName('input')[inputCount-3]); //Delete the third last element because the last two are always the two buttons.
    parentCell.removeChild(parentCell.getElementsByTagName('br')[brCount-1]);
}
window.onload = addForestName;
</script>
<form action="tableaddrow_nw.html" method="get">
   <table width="640" border="1" id="tblSample">
       <tr>
           <td>No.</td>
           <td>Forest Name</td>
           <td width="40">Name of the villages <br />participating in managing</td>
           <td>Type of participatory forest management</td>
           <td>Year participatory management process started</td>
           <td>Size of forest</td>
       </tr>
  </table>
</form>
<p>
  <input type="button" value="Add" onclick="addForestName();" />
  <input type="button" value="Remove" onclick="removeForestName();" />
</p>