srima
asked on
createElement("select") no <option>
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("se lect")){
//setAttribute("type", "text");
setAttribute("maxlength", "3");
setAttribute("name", "item"+rowCount);
setAttribute("id", "itemTextId"+rowCount);
setAttribute("size", "3");
}
itemTD.appendChild(itemINP UT);
itemTD.setAttribute("id"," itemRow"+r owCount);
newrow.appendChild(itemTD) ;
document.getElementById("q uoteTableB odyId").ap pendChild( 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>
<!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("se
//setAttribute("type", "text");
setAttribute("maxlength", "3");
setAttribute("name", "item"+rowCount);
setAttribute("id", "itemTextId"+rowCount);
setAttribute("size", "3");
}
itemTD.appendChild(itemINP
itemTD.setAttribute("id","
newrow.appendChild(itemTD)
document.getElementById("q
}
// 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>
ASKER
its ok i found away to do this--here it is--
itemTD = document.createElement("td ");
with (itemSELECT = document.createElement("se lect")){
itemSELECT.setAttribute("n ame", "item"+rowCount);
itemSELECT.setAttribute("i d", "itemTextId"+rowCount);
itemOPTION1 = document.createElement(¨op tion¨);
itemOPTION1.setAttribute(¨ id¨,¨opt1¨ );
itemOPTION1.setAttribute(¨ value¨,¨bl ah¨);
itemOPTION1.appendChild(do cument.cre ateTextNod e(¨blah¨);
itemSELECT.appendChild(ite mOPTION1);
}
itemTD.appendChild(itemSEL ECT);
itemTD.setAttribute("id"," itemRow"+r owCount);
newrow.appendChild(itemTD) ;
although it gets anoying if you have lots of options it works
if anyones got a better way im all ears
itemTD = document.createElement("td
with (itemSELECT = document.createElement("se
itemSELECT.setAttribute("n
itemSELECT.setAttribute("i
itemOPTION1 = document.createElement(¨op
itemOPTION1.setAttribute(¨
itemOPTION1.setAttribute(¨
itemOPTION1.appendChild(do
itemSELECT.appendChild(ite
}
itemTD.appendChild(itemSEL
itemTD.setAttribute("id","
newrow.appendChild(itemTD)
although it gets anoying if you have lots of options it works
if anyones got a better way im all ears
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</opti on><option >CANADA</o ption></se lect>'
}
</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.g etElementB yId('myTab leTBody')) ">
</body>
</html>
<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
}
</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.g
</body>
</html>
a non-DOM way:
assuming obj is the select to be fiiled with options:
obj.options[obj.options.le ngth] = 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
assuming obj is the select to be fiiled with options:
obj.options[obj.options.le
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
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
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
eg--
itemTD = document.createElement("td
itemTD.setAttribute("bgcol
with (itemINPUT = document.createElement("se
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?