Adding Combo-box dynamically

Question

Howdy folks..

I'm trying to design a table in HTML which can add a row when I click "add row" button & the same for deleting an added row if i intend to delete it. I have written a javascript for adding checkbox and text. But I want even combo-boxes in it and I m stuck in the middle. Could you guys just figure it out and let me know how to do that? This is my JS file.

function addRow(tableID) {

  var table = document.getElementById(tableID);

  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);

  var cell1 = row.insertCell(0);
  var element1 = document.createElement("input");
  element1.type = "checkbox";
  cell1.appendChild(element1);

  var cell2 = row.insertCell(1);
  cell2.innerHTML = rowCount + 1;

  var cell3 = row.insertCell(2);
  var element2 = document.createElement("input");
  element2.type = "text";
  cell3.appendChild(element2);

  var cell4 = row.insertCell(3);
  var element3 = document.createElement("input");
  element3.type = "text";
  cell4.appendChild(element3);

  var cell5 = row.insertCell(4);
  //This is where the PROBLEM is!!
                    var element4 = document.createElement("select");
  element4.type = "option";
  cell5.appendChild(element4);

 }

 function deleteRow(tableID) {
  try {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;

  for(var i=0; i<rowCount; i++) {
   var row = table.rows[i];
   var chkbox = row.cells[0].childNodes[0];
   if(null != chkbox && true == chkbox.checked) {
    table.deleteRow(i);
    rowCount--;
    i--;
   }

  }
  }catch(e) {
   alert(e);
  }
 }

// JavaScript Document

NOTE: Please dont suggest SERVER_SIDE SCRIPTING. I'm just doing my homework on Java Script :)

Answer 1

Try to think of the outcome that you wish to get. In this case you wish to have HTML that looks like this:

    <select>
       <option></option>
       <option></option>
    </select>

So the question is what elements are there? There are three in my example, a select and two options. So in your JavaScript how do you create elements?

 var element4 = document.createElement("select");

This creates a select. So how would you create an option?

   var option1 = document.createElement("option");

maybe?

how would you add the option to the select? Same way you add the select to the cell.

   element4.appendChild(option1);

then create the other options that you need and add the select to the cell.

Answer 2

Since this is a homework assignment, I can only lead you to water.

w3schools is a wonderful resource for javascript.

Here's my hint: what type is the select in their example?

http://www.w3schools.com/tags/tag%5Fselect.asp

Answer 3

This should do the trick:

 var cell5 = row.insertCell(4);
 //This is where the SOLUTION is!!
 var element4 = document.createElement("select");
 var option1 = document.createElement("option");
 option1.value="1";
 option1.innerHTML="sample1";
 element4.appendChild(option1);
 var option2 = document.createElement("option");
 option2.value="2";
 option2.innerHTML="sample2";      
 element4.appendChild(option2);
  cell5.appendChild(element4);

Answer 4

why not trying

var sel=document.createElement("select");

// repeat this for each option you have

var opt=document.createElement("option");
opt.value="my option value";
opt.text="my option to be displayed";
sel.appendChild(opt);

// end repeat

cell5.appendChild(sel);

Answer 5

sorry coz this is another question. what about if there's php function to set the value or text of the option?? how can we combine with all those javascript code?? thx before :)