javascript动态输入字段

Question

我有JavaScript动态输入字段的问题。我有三个字段，其中一个带有一个号码，另外两个带有a & b。我的问题是在a输入字段下显示b输入字段。

我的代码：

<script language="JavaScript" type="text/javascript"> 
function addRowToTable() 
{ 
    var tbl = document.getElementById('tblSample'); 
    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); 

    // left cell 
    var cellLeft = row.insertCell(0); 
    var textNode = document.createTextNode(iteration); 
    cellLeft.appendChild(textNode); 

    // right cell 
    var cellRight1 = row.insertCell(1); 
    var el = document.createElement('input'); 
    el.type = 'text'; 
    el.name = 'element_45_1' + iteration; 
    el.id = 'element_45_1' + iteration; 
    el.size = 40; 

    //el.onkeypress = keyPressTest; 
    cellRight1.appendChild(el); 

    // right cell 
    var cellRight2 = row.insertCell(2); 
    var el = document.createElement('input'); 
    el.type = 'text'; 
    el.name = 'element_45_2' + iteration; 
    el.id = 'element_45_2' + iteration; 
    el.size = 40; 

    //el.onkeypress = keyPressTest; 
    cellRight2.appendChild(el); 

    // right cell 
    var cellBottom3 = row.insertCell(3); 
    var el = document.createElement('input'); 
    el.type = 'text'; 
    el.name = 'element_45_12' + iteration; 
    el.id = 'element_45_12' + iteration; 
    el.size = 40; 

    //el.onkeypress = keyPressTest; 
    cellBottom3.appendChild(el); 
} 

function removeRowFromTable() 
{ 
    var tbl = document.getElementById('tblSample'); 
    var lastRow = tbl.rows.length; 
    if (lastRow > 2) tbl.deleteRow(lastRow - 1); 
} 
</script> 

<form action="tableaddrow_nw.html" method="get"> 
    <table width="540" border="1" id="tblSample"> 
    <tr> 
     <th colspan="3">Sample table</th> 
    </tr> 
    <tr> 
     <td width="8">1</td> 
     <td width="240"> 
     <input type="text" name="element_45_1" 
       id="element_45_1" size="40" /> 
     </td> 
     <td width="20"> 
     <div1> 
      a.&nbsp; 
      <input type="text" name="element_45_2" 
       id="element_45_2" size="40" /> 
     </div1> 
     </td> 
     <td width="20"> 
     b.&nbsp; 
     <input type="text" name="element_45_12" 
       id="element_45_12" size="40" /> 
     </td> 
    </tr> 
    </table> 
</form> 
<p> 
    <input type="button" value="Add" onclick="addRowToTable();" /> 
    <input type="button" value="Remove" onclick="removeRowFromTable();" /> 
</p> 

Answer 1

如果您尝试动态地添加具有迭代次数作为第一个数据单元格（TD），一个输入框，第二单元和两个输入行作为第三个单元格放置在另一个之下的盒子，您可以尝试下面的一段代码。

// right cell 
var cellRight2 = row.insertCell(2); 

var textNode = document.createTextNode('a'); 
cellRight2.appendChild(textNode); 

var el1 = document.createElement('input'); 
el1.type = 'text'; 
el1.name = 'element_45_2' + iteration; 
el1.id = 'element_45_2' + iteration; 
el1.size = 40; 
cellRight2.appendChild(el1); 

var textNode = document.createTextNode('b'); 
cellRight2.appendChild(textNode); 
var el2 = document.createElement('input'); 
el2.type = 'text'; 
el2.name = 'element_45_12' + iteration; 
el2.id = 'element_45_12' + iteration; 
el2.size = 40; 

//el.onkeypress = keyPressTest; 

cellRight2.appendChild(el2); 

---

根据您的回应，我认为这是你在找什么。

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 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 

    parentCell.removeChild(this); //temporarily remove the add village button to insert the new field before it 
    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); 
} 

Answer 2

使用rowspan为了使a和b在同一行。

<tr> 
     <td width="8" rowspan="2">1</td> 
     <td width="240" rowspan="2"> 
     <input type="text" name="element_45_1" 
       id="element_45_1" size="40" /> 
     </td> 
     <td width="20"> 
     <div1> 
      a.&nbsp; 
      <input type="text" name="element_45_2" 
       id="element_45_2" size="40" /> 
     </div1> 
     b.&nbsp; 
     <input type="text" name="element_45_12" 
       id="element_45_12" size="40" /> 
     </td> 
</tr> 

这里是工作提琴：Fiddle