/    Sign up×
Community /Pin to ProfileBookmark

Question on HTML DOM Select Object

Copy linkTweet thisAlerts:
Dec 13.2007

To clarify, the thing i’m trying to insert is,
[url]http://www.w3schools.com/htmldom/dom_obj_select.asp[/url]

I have a table and i want to insert a select object into one of the cell. but i am getting a “Type mismatch” error on line with code “cell.insertBefore(selectBox);”

I am running IE 6

[CODE]
 var selectBox = document.createElement(‘select’);

var option = document.createElement(‘option’);
option.text = “And”;

try
{
selectBox.add(option, null); // standards compliant
}
catch(ex)
{
selectBox.add(option); // IE only
}

}

cell5.insertBefore(selectBox);

[/CODE]

Thanks alot!!

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@UI-ZEIKVKDec 13.2007 — It seems OK. But from where that cell5 comes?
Copy linkTweet thisAlerts:
@Ay__351_eDec 13.2007 — try this:
<br/>
&lt;script type="text/javascript"&gt;
function myselect(){
var selectBox = document.createElement('select');
var cell5 = document.getElementById('cell5');
var option = document.createElement('option');
option.text = "And";

try
{
selectBox.add(option, null); // standards compliant
}
catch(ex)
{
selectBox.add(option); // IE only
}
cell5.insertBefore(selectBox,cell5.childNodes[0]);
}


&lt;/script&gt;
&lt;input type="button" value="add select" onclick="myselect()"&gt;
&lt;table id="mytable"&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;cell&lt;/td&gt;
&lt;td&gt;cell&lt;/td&gt;
&lt;td&gt;cell&lt;/td&gt;
&lt;td&gt;cell&lt;/td&gt;
&lt;td id="cell5"&gt;cell&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
Copy linkTweet thisAlerts:
@KorDec 13.2007 — In fact I guess it will not work in Mozilla and DOM compliant browsers

You missed the proper arguments:

parentObj.inserBefore(newChild,[I]existentChild[/I])

IE only accepts the syntax

parentObj.inserBefore(newChild), presuming that, if the second argument is not present, it will be the first child.
Copy linkTweet thisAlerts:
@lunlunauthorDec 14.2007 — ayse, I have tried your method and it works.

However, for my case, i need to add in my cell dynamically too.

since then i tried the following..

[CODE] var cRow = document.getElementById("displayCondition").insertRow(rowIndexDC++);

if (rowIndexDC % 2 == 0)
cRow.bgColor = "#cccccc";

var cell0 = cRow.insertCell(0);
var cell1 = cRow.insertCell(1);
var cell2 = cRow.insertCell(2);
var cell3 = cRow.insertCell(3);
var cell4 = cRow.insertCell(4);
var cell5 = cRow.insertCell(5);
cell5.align = "center";

if(rowIndexDC != 3) {
var selectBox = document.createElement('select');

var option = document.createElement('option');
option.text = "And";

try
{
selectBox.add(option, null); // standards compliant
}
catch(ex)
{
selectBox.add(option); // IE only
}


}

cell1.insertBefore(selectBox, cell1.childNodes[0]);[/CODE]


which still gives me the type mismatch error.



P.S. sorry for omiting what cell5 was.
Copy linkTweet thisAlerts:
@Ay__351_eDec 18.2007 — 
&lt;body&gt;
&lt;table border="1"&gt;&lt;tbody id="tbodyid"&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;script type="text/javascript"&gt;
function mytable(){
var el = document.getElementById('tbodyid');

for(var i=0; i&lt;5 ; i++) {
var r =el.insertRow(i);
if(i%2==0) { r.bgColor="red";}
for(var n=0; n&lt;5 ; n++) {
var c = r.insertCell(n);
c.appendChild(document.createTextNode("cell"+n))
}
if(i!=3) {
var sel = document.createElement('select');
var opt = document.createElement('option');
opt.innerHTML="lunlun";
sel.appendChild(opt);
r.childNodes[0].insertBefore(sel,r.childNodes[0].childNodes[0]); }
}
alert(el.parentNode.innerHTML);
}
mytable();
&lt;/script&gt;
Copy linkTweet thisAlerts:
@KorDec 18.2007 — why not appendChild() instead of insertBefore() ?
Copy linkTweet thisAlerts:
@Ay__351_eDec 23.2007 — I could have written

r.childNodes[0].appendChild(sel);

instead of

r.childNodes[0].insertBefore(sel,r.childNodes[0].childNodes[0]);

But I thought that lunlun wanted to use insertBefore()
×

Success!

Help @lunlun spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...