0

JavaScript 動的入力フィールドに問題があります。3 つのフィールドがあり、1 つは数値、2 つはa&bです。私の問題は、b入力フィールドの下に入力フィールドを表示することaです。

私のコード:

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

2 に答える 2

0

最初のデータ セル (td) として反復回数、2 番目のセルとして 1 つの入力ボックス、3 番目のセルとして上下に配置された 2 つの入力ボックスを持つ行を動的に追加しようとしている場合は、次の部分を試すことができます。コード。

// 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);
}
于 2013-07-22T11:58:13.220 に答える