Javascript, Dynamic Table insert option boxes into table

Question

I have been using excel for my project for a few years. I have finally decided to move it into a html project instead. It kinda sucks as I need to learn everything about JS, CSS and html and probably much more. And my excel project is quite advanced at this point.

But I will just have to start at the beginning and add things as I learn. In the end I think it will be worth it.

So after many hours of trial and error I have been able to create this simple code:

function myFunction2() {
    var table = document.getElementById("Table1");
    var row = table.insertRow(table.length);
    for (i = 0; i < 10; i++) {
        row.insertCell(i);
    }
    row.insertCell(1).innerHTML = "NEW CELL1";

}

And here is the delete function, is that phrased correctly as I thought the numbers where acting strangely

function myDeleteFunction() {
    var x = document.getElementById('Table1').rows.length;
    var x = (+x - +1);
    if (x >= 1) {
        document.getElementById("Table1").deleteRow(x);
    }
}

This basically insets one new row to my table, However in cells(0,3,4,5,6,7,10) I would need a dropdown list How would I go about to add this ?

Any help would be much appreciated.

score 1 · Answer 1 · answered Jan 19 '18 at 10:20

In the world of HTML the nearest analogy of a dropdown list is probably select element; a simple example would be (at the end of your myFunction2):

row.insertCell(0).innerHTML = '<select><option>opt A</option><option>opt B</option></select>';

You might want to use the DOM API (to save some parsing & prevent problems from creating HTML directly) - see for example this SO question on how to do so.

score 1 · Answer 2 · answered Jan 19 '18 at 10:52

Hi guys thanks for your replies. I actually found an answer while waiting , Not sure if my way is the best:

function myFunction2() {
    var img = new Image();
    var table = document.getElementById("Table1");
    var row = table.insertRow(table.length);
    for (i = 0; i < 12; i++) {
        row.insertCell(i);
 }
     //Add Txt
    row.insertCell(1).innerHTML = "insert";

    //Add drop-down list
   var dd = document.createElement("select");
   dd.name = "SportSelector";
   dd.id = "id";
   dd.options[dd.length] = new Option("Soccer", "value");
   dd.options[dd.length] = new Option("Basket", "value");
   dd.options[dd.length] = new Option("Hockey", "value");
   row.insertCell(0).appendChild(dd);
    //Done
}

I will need to study this. looks like my code was a little long. But of course I solve one problem and I get 10 more :) lol

I'm not sure if it considered polite to ask for a follow up question here as question is solved.

However I feel my next question is closely related to the first one. As my code will add a ton of these drop-downs in the end. I would need somehow to "find" the drop-down again with my next js function.

How would it be possible to add a code that "catches" which drop-down i edit and return a popup msg or something ?

frederik

score 0 · Accepted Answer · answered Jan 19 '18 at 10:20

For adding row you can do something like this

function myFunction2() {
    var table = document.getElementById("Table1");
    var row = table.insertRow(table.length);
    var dropDownHtml = "<select><option>A</option><option>B</option><option>C</option></select>";
    var cell;
    for (i = 0; i <= 10; i++) {
        cell = row.insertCell(i);
        if (i == 0 || i == 10 || (i >= 3 && i <= 7)) {
            cell.innerHTML = dropDownHtml;
        }
    }
}

FYI : You can add/remove row at starting my using index 0 and at the end by using index as -1 for insertRow()/deleteRow()

You can modify your delete row function as follows

function myDeleteFunction() {
    var x = document.getElementById('Table1').rows.length;
    x = (x - 1); //do you want to not allow header to be removed or what ?
    if (x >= 1) {
        document.getElementById("Table1").deleteRow(x);
    }
}

Thanks for this , I had some strange results with this variable earlier today that's why I wrote it like I did . I read something about the var not being a long but actually a string. But after testing this it works just fine — Frederik 84, Jan 19 '18 at 11:03

Javascript, Dynamic Table insert option boxes into table

3 Answers3