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

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.

另外，有很多重复的项目可能需要转换为单独的函数以提高可维护性。