Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

createElement("select")  no <option>

Posted on 2004-04-22
7
Medium Priority
?
1,121 Views
Last Modified: 2008-01-09
while searching the internet for  a script that adds rows and works in most browsers i found this on webxpert.net (by piglet) this works great in adding tr td and inputs,  i´ve manipulated this to add select (pulldown menu) by changing input to select and removing type, text-  but i cant seem to add any options to this can someone please help?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Netscape Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<!-- javascript -->
<script type="text/JavaScript">
<!--

var rowCount = 0;

function insertaRow() {
rowCount++;
var newRow;

newrow = document.createElement("tr");
newrow.setAttribute("id", "row" + rowCount);

itemTD = document.createElement("td");
with (itemINPUT = document.createElement("select")){
      //setAttribute("type", "text");
      setAttribute("maxlength", "3");
      setAttribute("name", "item"+rowCount);
      setAttribute("id", "itemTextId"+rowCount);
      setAttribute("size", "3");
}

itemTD.appendChild(itemINPUT);

itemTD.setAttribute("id","itemRow"+rowCount);
newrow.appendChild(itemTD);

document.getElementById("quoteTableBodyId").appendChild(newrow);
}

// end Helpers -->
</script>

</head>
<body>
<table id="quoteTableId" align="center" cellpadding=0 cellspacing=0>
<tbody id="quoteTableBodyId">
</tbody>
</table>

<table>
<tr>
<td>
<input type="button" value="Add Row" onClick="insertaRow()" style="width:85;">
</td>
</tr>
</table>
</body>
</html>
0
Comment
Question by:srima
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
7 Comments
 

Author Comment

by:srima
ID: 10896505
also when i try to set the td´s bgcolor attribute with--itemTD.setAttribute("bgcolor", "#778899");
eg--
itemTD = document.createElement("td");
itemTD.setAttribute("bgcolor", "#778899");
with (itemINPUT = document.createElement("select")){
in ie6.0 this dont work but works in netscape7.1,opera7.2 and mozila
-any ideas on how to set the bgcolor attribute in internet explorer?
0
 

Author Comment

by:srima
ID: 10896891
its ok i found away to do this--here it is--
itemTD = document.createElement("td");
with (itemSELECT = document.createElement("select")){
     itemSELECT.setAttribute("name", "item"+rowCount);
     itemSELECT.setAttribute("id", "itemTextId"+rowCount);
     itemOPTION1 = document.createElement(¨option¨);
     itemOPTION1.setAttribute(¨id¨,¨opt1¨);
     itemOPTION1.setAttribute(¨value¨,¨blah¨);
     itemOPTION1.appendChild(document.createTextNode(¨blah¨);
     itemSELECT.appendChild(itemOPTION1);
}

itemTD.appendChild(itemSELECT);

itemTD.setAttribute("id","itemRow"+rowCount);
newrow.appendChild(itemTD);

although it gets anoying if you have lots of options it works
if anyones got a better way im all ears
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 10897486
try this

<head>
<script>
function addRow(aTable) {
len=aTable.rows.length
aRow = aTable.insertRow(len);
c1=aRow.insertCell(0)
c1.innerHTML='<select maxlength=3 name="item"'+len+'><option>USA</option><option>CANADA</option></select>'
}
</script>
</head>

<body>
<table id="myTable" name="myTable" border="1">
  <tbody id="myTableTBody" name="myTableTBody">
  </tbody>
</table>
<input type=button id="addRow" value='add row' onClick="addRow(document.getElementById('myTableTBody'))">

</body>
</html>
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 5

Expert Comment

by:alambres
ID: 10898202
a non-DOM way:

assuming obj is the select to be fiiled with options:

obj.options[obj.options.length] = new Option("myDescription", "myValue");

the Option constructor has 2 additional optional args to determine if the appended option is selected or not, just see:
http://www.devguru.com/Technologies/ecmascript/quickref/option.html
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 10899727
Hi srima,

  Why didn't you ask piglet to help you modify the script?  I'm positive he would have been more than happy to :D

Vinny
moderator at:
http://www.webxpertz.net/forums
0
 

Accepted Solution

by:
modulo earned 0 total points
ID: 11363991
PAQed, with points refunded (150)

modulo
Community Support Moderator
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

636 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question