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

Question

我在javascript中添加了这个代码块，它添加了动态输入字段。在这一点上，每件事情都很好。我的问题是，我将如何在其他单元格的表格中添加更多的输入字段与村名输入字段？当用户添加村庄1 /移除村庄1时，任一操作都应在名为：参与式森林管理类型，开始参与式管理过程的年份和森林大小的列上添加/删除对齐输入字段。上述各栏输入栏增量应反映村名栏动态输入栏的增量。稍后我将使用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> 

Answer 1

如果我理解正确你的问题，以下是你在找什么。使用以下方法可以获得所需的表列（列号是硬编码的，因为这只是一个示例）。一旦掌握了所需的栏目，添加/删除字段应该是直接的。查看此Fiddle的工作示例。

var tbl = document.getElementById('tblSample'); 
var frstMgmtCell = tbl.rows[rowNumber].cells[3]; //Get hold of the Forest Mgmt Column of that specific row. 

在附注中，有很多重复的项目，您可能需要将其转换为单独的功能以实现更好的可维护性。