Adding Combo-box dynamically

Question

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

Are you allowed to use jQuery?

SLaks
– SLaks

2009-12-17 01:39:39 +00:00
Commented Dec 17, 2009 at 1:39 — SLaks
– SLaks, Commented Dec 17, 2009 at 1:39
Just some homework on javascript :)

Sandeep
– Sandeep

2009-12-17 13:03:38 +00:00
Commented Dec 17, 2009 at 13:03 — Sandeep
– Sandeep, Commented Dec 17, 2009 at 13:03

Treby · Accepted Answer · 2009-12-17 01:44:14Z

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

answered Dec 17, 2009 at 1:44

Treby

1,3206 gold badges18 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sandeep Over a year ago

Perfectly Worked! Thanks a ton for the suggestion!

Vincent Ramdhanie · Accepted Answer · 2009-12-17 01:39:22Z

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.

answered Dec 17, 2009 at 1:39

Vincent Ramdhanie

103k23 gold badges143 silver badges196 bronze badges

Comments

Patrick · Accepted Answer · 2009-12-17 01:49:20Z

1

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

answered Dec 17, 2009 at 1:49

Patrick

15.7k1 gold badge42 silver badges39 bronze badges

Collectives™ on Stack Overflow

Adding Combo-box dynamically

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related