將輸入字段動態添加到列中

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. 

在附註中，有很多重複的項目，您可能需要將其轉換爲單獨的功能以實現更好的可維護性。