Vfrdtyky

i have a add button in my jsp. while clicking on the add button, it will add a complete row which will include the checkbox, serial no, textbox and a drop down list with options.
i can able to add checkbox and text box but i am not able to add the serial no column(which is increasing the serial no by 1) and the drop down list options to the select through javaScript.
As the eleements are adding the ids dynamically i am not able to get the element by its id to check.

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>

please help me to get the solution. i tried with possibilities but never get a solution what i need.Thanks in advance.

You've missed setting the value of Serial Number.

 var el2 = document.createElement('input');

 el2.type = 'style';

 el2.name = 'style_' + i;

 el2.id = 'style_' + i;



 el2.value = i;

Also, You have to set options to select something like below

 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>