Velocity Reviews - Computer Hardware Reviews
Home Forums Reviews Guides Newsgroups Register Search
Member Login:

Velocity Reviews > Newsgroups > Programming > Javascript > Dynmically creating elements in a table works with firefox, opera, but not ie

Reply
Thread Tools

Dynmically creating elements in a table works with firefox, opera, but not ie

 
 
patrickkellogg
Guest
Posts: n/a
 
      07-10-2006
I have this code when you click the buttom is suppose to add a job
history. it works with firefox, opera, but not ie. (please note -
new entries don't have all the elements in them yet, but enough to get
the idea).


Here is the code:
-----------------------------------------------------------------

<html>
<head>
<title>Dynamic Form</title>
<script language="javascript">

function addStuff()
{
var theValue = document.getElementById('theValue');
theValue.value += 1;

var position = document.getElementById('positions');
tr = document.createElement("tr");
position.appendChild(tr);

td = document.createElement("td");
tr.appendChild(td);
td.innerHTML = "<textarea name='emp" + theValue.value +
"'></textarea>";

td = document.createElement("td");
tr.appendChild(td);
td.innerHTML = "<P>From:</P><P>To:</P>";

sel = document.createElement("select");
sel.setAttribute("name", "aaa");
tr.appendChild(sel);

for (n=1960; n < 2006; n++)
{
option = document.createElement("option");
option.setAttribute("value", n);
option.innerHTML = n;
sel.appendChild(option);
}
}




</script>
</head>
<body>
<H3 align="center">Employment History - Last 10 Years</H3>
<form name="myform">

<table cellspacing="3" id="positions" cellpadding="2" border="1"
width="100%">
<tr>
<td>latest/current</td>
<td>
<textarea name="emp1" rows="6" cols="40" ></textarea>
</td>
<td>
<P>From:</P>
<P>To:</P>
</td>
<td>
<P>

<select name="emp1_fr_mm" size="1">
<option value="sl">- SELECT -</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>

<select name="emp1_fr_yyyy" size="1">
<option value="sl">- SELECT -</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
</select>
<P>

<select name="emp1_to_mm" size="1">
<option value="sl">- SELECT -</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="emp1_to_yyyy" size="1">
<option value="sl">- SELECT -</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
</select>
</P>

</td>

</tr>
<tr>
<td>previous employment</td>
<td>
<textarea name="emp2" rows="6" cols="40" ></textarea>
</td>
<td>
<P>From:</P>
<P>To:</P>
</td>
<td>
<P><select name="emp2_fr_mm" size="1">
<option value="sl">- SELECT -</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>

<select name="emp2_fr_yyyy" size="1">
<option value="sl">- SELECT -</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
</select>


</P>
<P>
<select name="emp2_to_mm" size="1">
<option value="sl">- SELECT -</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="emp2_to_yyyy" size="1">
<option value="sl">- SELECT -</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
</select>

</P>

</td>
</tr>
<tr>
<td>previous employment</td>
<td>
<textarea name="emp3" rows="6" cols="40" ></textarea>
</td>
<td>
<P>From:</P>
<P>To:</P>
</td>
<td>
<P>
<select name="emp3_fr_mm" size="1">
<option value="sl">- SELECT -</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="emp3_fr_yyyy" size="1">
<option value="sl">- SELECT -</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
</select>
</P>

</P>
<select name="emp3_to_mm" size="1">
<option value="sl">- SELECT -</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="emp3_to_yyyy" size="1">
<option value="sl">- SELECT -</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
</select>
</td>
</tr>
<tr>
<td>previous employment
</td>
<td>
<textarea name="emp4" rows="6" cols="40" ></textarea>
</td>
<td>
<P>From:</P>
<P>To:</P>
</td>
<td>
<P>
<select name="emp4_fr_mm" size="1">
<option value="sl">- SELECT -</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="emp4_fr_yyyy" size="1">
<option value="sl">- SELECT -</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
</select>
</P>

</P>
<select name="emp4_to_mm" size="1">
<option value="sl">- SELECT -</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="emp4_to_yyyy" size="1">
<option value="sl">- SELECT -</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
</select>
</td>




<input type="hidden" value="5" id="theValue" />


<div id="my_div"></div>

</table>
<input type="button" value="Add An Employment History"
onClick="addStuff()">
<input type="submit" value="Next">

</form>
</body>
</html>






</form>

</body>
</html>
-----------------------------------------------------------------------------------------------------------------------

Can anyone tell me how to get this to work with ie?

Thanks very much.

patrick kellogg
 
Reply With Quote
 
 
 
 
Martin Honnen
Guest
Posts: n/a
 
      07-10-2006


patrickkellogg wrote:


> var position = document.getElementById('positions');
> tr = document.createElement("tr");
> position.appendChild(tr);

You need to append the tr element to a tbody element (which the HTML
parser creates even if it is not in the markup):
var tbody = position.tBodies[position.tBodies.length - 1];
tbody.appendChild(tr);
That makes IE happy and the other browsers too.



--

Martin Honnen
http://JavaScript.FAQTs.com/
 
Reply With Quote
 
 
 
 
patrickkellogg
Guest
Posts: n/a
 
      07-10-2006
Martin,

Thanks very much. ie works much better but still doesn't display the
select box years, which firefox and opera does okay.

taking your advise, here is the function code: I am new at this
dynamic stuff and i really don't understand it very well. did i put
the:

var tbody = position.tBodies[position.tBodies.length - 1];
tbody.appendChild(tr);

in the correct place? Does it need to be inserted in more than one
place?

thanks again.
patrick


---------------------------------------------------------------------------

function addStuff()
{
var theValue = document.getElementById('theValue');
theValue.value += 1;

var position = document.getElementById('positions');
tr = document.createElement("tr");
position.appendChild(tr);

var tbody = position.tBodies[position.tBodies.length - 1];
tbody.appendChild(tr);


td = document.createElement("td");
tr.appendChild(td);
td.innerHTML = "<textarea name='emp" + theValue.value +
"'></textarea>";

td = document.createElement("td");
tr.appendChild(td);
td.innerHTML = "<P>From:</P><P>To:</P>";

sel = document.createElement("select");
sel.setAttribute("name", "aaa");
tr.appendChild(sel);


for (n=1960; n < 2006; n++)
{
option = document.createElement("option");
option.setAttribute("value", n);
option.innerHTML = n;
sel.appendChild(option);


}
}

------------------------------------------------------------------------------------------------





Martin Honnen wrote:

> patrickkellogg wrote:
>
>
> > var position = document.getElementById('positions');
> > tr = document.createElement("tr");
> > position.appendChild(tr);
>
> You need to append the tr element to a tbody element (which the HTML
> parser creates even if it is not in the markup):
> var tbody = position.tBodies[position.tBodies.length - 1];
> tbody.appendChild(tr);
> That makes IE happy and the other browsers too.
>
>
>
> --
>
> Martin Honnen
> http://JavaScript.FAQTs.com/
 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      07-10-2006
patrickkellogg wrote:
> Martin,

Please dont' top post, interleave replies with trimmed, quoted text
from whatever you are replying to. Also, don't use tabs for indenting
when posting, use 2 or 4 spaces.


> Thanks very much. ie works much better but still doesn't display the
> select box years, which firefox and opera does okay.
>
> taking your advise, here is the function code: I am new at this
> dynamic stuff and i really don't understand it very well. did i put
> the:
>
> var tbody = position.tBodies[position.tBodies.length - 1];
> tbody.appendChild(tr);
>
> in the correct place? Does it need to be inserted in more than one
> place?
>
> thanks again.
> patrick
>
>
> ---------------------------------------------------------------------------
>
> function addStuff()
> {
> var theValue = document.getElementById('theValue');

In the code you posted, there is no element with id 'theValue', is it
an input element?

> theValue.value += 1;

If it is, then its value is a string and the above will concatenate a
'1' to the end of it (1 will become 11, 20 will become 201, and so on),
it wil not perform an arithmetic sum which is probably what you want.
If you want to add one to the value you need to convert it to a number
first. The unary '+' operator is normally suggested:

theValue.value = +theValue.value + 1;

Alternatively you can subtract -1 which is effectively the same as the
above, but that is a little less logical and may create a maintenance
issue:

theValue.value -= -1;


> var position = document.getElementById('positions');
> tr = document.createElement("tr");
> position.appendChild(tr);

As noted previoiusly, most browsers let you add tr elements directly to
the table (they will append them to the first tableSection element) but
not IE. Your next couple of lines actually moves the row to the first
tBody if it hand't been placed there already.


> var tbody = position.tBodies[position.tBodies.length - 1];
> tbody.appendChild(tr);

You can save all this fuss using insertRow:

var tr = position.insertRow(-1);


Done. The new row is appended as the table's last row and 'tr' is a
reference to it. In IE you can omit the (-1), but not W3C compliant
browsers, they need it (as per the spec).

<URL:http://developer.mozilla.org/en/docs/DOM:table.insertRow>


> td = document.createElement("td");
> tr.appendChild(td);

And here you could use insertCell (and use 'var' to keep variables
local unless you mean to use global scope, in which case they should be
decared there for tidiness):

var td = tr.insertCell(-1);


> td.innerHTML = "<textarea name='emp" + theValue.value +
> "'></textarea>";

You started off wanting to use XHTML, I guess you've seen the light and
switched to HTML.

You could use DOM here if you like:

var tArea = document.createElement('textarea');
tArea.name = 'emp' + theValue.value;
td.appendChild(tArea);


> td = document.createElement("td");
> tr.appendChild(td);
> td.innerHTML = "<P>From:</P><P>To:</P>";

Here you can use:

td = tr.insertCell(-1);
var p = document.createElement('p');
p.appendChild(document.createTextNode('From:'));
td.appendChild(p);
p = document.createElement('p');
p.appendChild(document.createTextNode('To:'));
td.appendChild(p);


> sel = document.createElement("select");

var sel = ...

> sel.setAttribute("name", "aaa");

It's more reliable to use:

sel.name = 'aaa';

setAttribute is broken in some circumstances in IE, so just don't use
it.


> tr.appendChild(sel);

A TR can only have TD elements as children, you have to put the select
in a TD or outside the table. I think you meant to do:

td.appendChild(sel);


> for (n=1960; n < 2006; n++)
> {
> option = document.createElement("option");
> option.setAttribute("value", n);
> option.innerHTML = n;
> sel.appendChild(option);

As documented here many times, IE doesn't like creating options using
createElement. Use DOM 0 and new Option (search for it, there are
plenty of examples):

for (n=1960; n < 2006; n++)
{
sel.options[sel.length] = new Option(n, 'value');

Which is much shorter too


> }
> }
>

Here's a working example (tested in IE 6 and Firefox 1.5):

<title>Add stuff</title>
<script type="text/javascript">
function addStuff()
{
var theValue = document.getElementById('theValue');
theValue.value = +theValue.value + 1;

// theValue.value -= -1;


var position = document.getElementById('positions');
var tr = position.insertRow(-1);
var td = tr.insertCell(-1);
var tArea = document.createElement('textarea');
tArea.name = 'emp' + theValue.value;
td.appendChild(tArea);

td = tr.insertCell(-1);
var p = document.createElement('p');
p.appendChild(document.createTextNode('From:'));
td.appendChild(p);
p = document.createElement('p');
p.appendChild(document.createTextNode('To:'));
td.appendChild(p);

var sel = document.createElement("select");
sel.name = 'aaa';

td.appendChild(sel);

for (n=1960; n < 2006; n++)
{
sel.options[sel.length] = new Option(n, 'value');

}
}

</script>

<table id="positions">
<tr>
<td><input type="text" value="0" id="theValue"></td>
<td><input type="button" value="Add stuff"
onclick="addStuff();"></td>
</tr>
</table>



--
Rob
 
Reply With Quote
 
 
 
Reply

« how to execute .hta from IE ? | javascript syntax question »
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
Adding Html Code dynmically in Placeholder _MC_ ASP .Net 2 04-06-2007 03:21 PM
How to add javascript code dynmically? cotton_gear Javascript 4 10-27-2005 10:45 AM
Re: dynmically show thumbnails Brock Allen ASP .Net 0 04-14-2005 02:15 PM
[py2exe.i18n] English works, German works, but not French. What do I miss? F. GEIGER Python 3 08-06-2004 10:01 AM
After rebooting my PC works, works, works! Antivirus problem? Adriano Computer Information 1 12-15-2003 05:30 AM



Advertisments
 


Powered by vBulletin®. Copyright ©2000 - 2013, vBulletin Solutions, Inc..
SEO by vBSEO ©2010, Crawlability, Inc.
Contact Us - Archive - Privacy Statement - Top

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57