[RESOLVED] Adding tr dynamically :: problem with select as innerHTML from td

[Teranoz]

I use a form with a certain number of table rows
when I click a link js has to add a row
I add every td in it and this works ok.

But when I want to add a select the values are put next to an empty select instead of in them
According to MS this is some kind of bug in IE and should be handled using a div. But how whould I integrate that into my table ?

btw it should run in IE only, no problem if the solution does not work in other browsers.

theTable = (document.all) ? document.all.bestelregeltabel : document.getElementById("bestelregeltabel")
theTableBody = theTable.tBodies[0];
var newTR = document.createElement('tr');
var newTD;

//nieuwe regel maken
newTD = document.createElement('td');
newTD.innerHTML = "<input type=\"text\"  value=\"" + lastid + "\" name=\"regel-" + lastid + "\" style=\"width:50px;\"/>";
newTR.appendChild (newTD);
//artikel
newTD = document.createElement('td');
newTD.innerHTML = "<button class=\"Browser\" id=\"cmdkostensoort" + lastid + "\" tabindex=\"-1\" title=\"F2\"  language=\"VBS\"  onclick=\"SelectArtikel('" + lastid + "')\"></button><a tabindex=\"-1\" id=\"RefSelArt\" class=\"saveHistory\"></a>";
newTD.innerHTML += "<input type=\"hidden\"  value=\"\" name=\"Artikel-" + lastid + "\"/>";
newTD.innerHTML += "<input type=\"text\"  value=\"\" name=\"ArtikelOms-" + lastid + "\"/>";
newTR.appendChild (newTD);
//aantal
newTD = document.createElement('td');
newTD.innerHTML = "<input type=\"text\"  value=\"\" name=\"aantal-" + lastid + "\" style=\"width:50px;\" onChange=\"return berekenaantal(" + lastid + ");\"/>";
newTR.appendChild (newTD);
//prijs
newTD = document.createElement('td');
newTD.innerHTML = "<input type=\"text\"  value=\"\" name=\"prijs-" + lastid + "\" style=\"width:50px;\" onChange=\"return berekenaantal(" + lastid + ");\"/>"
newTR.appendChild (newTD);
//bedrag
newTD = document.createElement('td');
newTD.innerHTML =  "<input type=\"text\" disabled value=\"\" name=\"bedrag-" + lastid + "\" style=\"width:50px;\"/>";
newTR.appendChild (newTD);
//leverdatum
newTD = document.createElement('td');
newTD.innerHTML =  "<button class=\"Calendar\" id=\"SelectLeverdatum-" + lastid + "\" tabindex=\"-1\" language=\"Javascript\" onclick=\"return Selectleverdatum_clicked(" + lastid + ");\"></button>";
newTD.innerHTML += "<input type=\"text\"  value=\"\" name=\"leverdatum-" + lastid + "\" style=\"width:60px;\"/>";
newTR.appendChild (newTD);
//kostendrager
newTD = document.createElement('td');
newTD.innerHTML =  "<button class=\"Browser\" id=\"cmdkostendrager-" + lastid + "\" tabindex=\"-1\" language=\"Javascript\" onclick=\"return SelectKostendrager(" + lastid + ");\"></button><a tabindex=\"-1\" id=\"RefSelKdrag\" class=\"saveHistory\"></a>";
newTD.innerHTML += "<input type=\"text\"  value=\"\" name=\"kostendrager-" + lastid + "\"/>";
newTR.appendChild (newTD);
//doorbelasting
newTD = document.createElement('td');
newTD.innerHTML = "\n<select name=\"doorbelasting-" + lastid + "\">\n";
newTD.innerHTML += "<option value=\"Nee\" selected>Nee</option>\n";
newTD.innerHTML += "<option value=\"Ja\" >Ja</option>\n";
newTD.innerHTML += "</select>\n";
newTR.appendChild (newTD);

newTR.id="tr-" + lastid;
theTableBody.appendChild(newTR);

[javajawa]

Why not go with:

newTD = document.createElement('td');
newSel = document.createElement('select');
newSel.name = 'doorbelasting-' + lastid;
newSel.options[0] = document.createElement('option');
newSel.options[0].value = 'Nee';
newSel.options[0].innerHTML = 'Nee';
newSel.options[1] = document.createElement('option');
newSel.options[1].value = 'Ja';
newSel.options[1].innerHTML = 'Ja';
newTD.appendChild(newSel);

This works in all of my test browsers.