如何通过javaScript为下拉列表添加序列号列和选项

Question

我的jsp中有一个添加按钮。单击添加按钮时，它将添加一个完整的行，其中包括复选框，序列号，文本框和带选项的下拉列表。我可以添加复选框和文本框但我无法添加序列无列（将序列号增加1）和下拉列表选项添加到select通过javaScript。由于元素动态添加id，我无法通过其id检查元素。

var i=1;
function addRow(tableID)
{
  var tbl = document.getElementById(tableID);
  var lastRow = tbl.rows.length;
  var iteration = lastRow - 1;
  var row = tbl.insertRow(lastRow);
  var firstCell = row.insertCell(0);
  //adding the checkbox 
  var el1 = document.createElement('input');
  el1.type = 'checkbox';
  el1.name = 'chkbox_' + i;
  el1.id = 'chkbox_' + i;
  el1.align = 'center';
  //el1.size = 15;
  el1.maxlength = 20;
  firstCell.appendChild(el1);

  var secondCell = row.insertCell(1);
  //adding the serial no 
  var el2 = document.createElement('input');
  el2.type = 'style';
  el2.name = 'style_' + i;
  el2.id = 'style_' + i;
  //el1.size = 15;
  el2.maxlength = 20;
  secondCell.appendChild(el2);

  var thirdCell = row.insertCell(2);
  //adding the textbox 
  var el3 = document.createElement('input');
  el3.type = 'text';
  el3.name = 'txtbox_' + i;
  el3.id = 'txtbox_' + i;
  el3.size = 15;
  el3.maxlength = 20;
  thirdCell.appendChild(el3);

  var forthCell = row.insertCell(3);
  //adding the option
  var el4 = document.createElement('select');
  el4.type = 'select-one';
  el4.name = 'select_' + i;
  el4.id = 'select_' + i;
  el4.value = "1";
  //el4.size = 15;
  el4.maxlength = 20;
  var select = document.getElementById("select_2");
  select.options[select.options.length] = new Option('Value1', 'Value2','Value3');
  forthCell.appendChild(el4);
  el4.appendChild(option);


 // alert(i);
  i++;
  frm.h.value=i;
//  alert(i);
}
</script>

请帮我解决问题。我尝试了可能性，但从来没有得到我需要的解决方案。谢谢你提前。

Answer 1

您错过了设置序列号的值。

 var el2 = document.createElement('input');
 el2.type = 'style';
 el2.name = 'style_' + i;
 el2.id = 'style_' + i;

 el2.value = i;

此外，您必须设置选项以选择下面的内容

 var el4 = document.createElement('select');
 var opt = document.createElement('option');

 opt.value = "Value1";
 opt.innerHTML = "Value1";

 el4.appendChild(opt);

window.onload = function()
{
  addRow("test");
}

var i=1;
function addRow(tableID)
{
  var tbl = document.getElementById(tableID);
  var lastRow = tbl.rows.length;
  var iteration = lastRow - 1;
  var row = tbl.insertRow(lastRow);
  var firstCell = row.insertCell(0);
  //adding the checkbox 
  var el1 = document.createElement('input');
  el1.type = 'checkbox';
  el1.name = 'chkbox_' + i;
  el1.id = 'chkbox_' + i;
  el1.align = 'center';
  //el1.size = 15;
  el1.maxlength = 20;
  firstCell.appendChild(el1);

  var secondCell = row.insertCell(1);
  //adding the serial no 
  var el2 = document.createElement('input');
  el2.type = 'style';
  el2.name = 'style_' + i;
  el2.id = 'style_' + i;
  //el1.size = 15;
  el2.value = i;
  el2.maxlength = 20;
  secondCell.appendChild(el2);

  var thirdCell = row.insertCell(2);
  //adding the textbox 
  var el3 = document.createElement('input');
  el3.type = 'text';
  el3.name = 'txtbox_' + i;
  el3.id = 'txtbox_' + i;
  el3.size = 15;
  el3.maxlength = 20;
  thirdCell.appendChild(el3);

  var forthCell = row.insertCell(3);
  //adding the option
  var el4 = document.createElement('select');
  el4.type = 'select-one';
  el4.name = 'select_' + i;
  el4.id = 'select_' + i;
  el4.value = "1";
  //el4.size = 15;
  el4.maxlength = 20;
  
  var opt = document.createElement('option');
    opt.value = "Value1";
    opt.innerHTML = "Value1";
    el4.appendChild(opt);
  
  //var select = document.getElementById("select_2");
  //select.options[select.options.length] = new Option('Value1', 'Value2','Value3');
  forthCell.appendChild(el4);
  //el4.appendChild(option);


 // alert(i);
  i++;
  //frm.h.value=i;
//  alert(i);
}
</script>

<input type="button" value="Add Row" onclick='addRow("test")' />
<table id="test"></table>