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

Discussion in 'Javascript' started by patrickkellogg, Jul 10, 2006.

  1. 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
    patrickkellogg, Jul 10, 2006
    #1
    1. Advertising

  2. Re: Dynmically creating elements in a table works with firefox, opera,but not ie

    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/
    Martin Honnen, Jul 10, 2006
    #2
    1. Advertising

  3. 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/
    patrickkellogg, Jul 10, 2006
    #3
  4. patrickkellogg

    RobG Guest

    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
    RobG, Jul 11, 2006
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. John Dalberg
    Replies:
    29
    Views:
    4,105
    kchayka
    Nov 3, 2004
  2. Bob
    Replies:
    24
    Views:
    1,529
  3. Jeff
    Replies:
    3
    Views:
    1,118
  4. Bob
    Replies:
    3
    Views:
    107
  5. Replies:
    2
    Views:
    113
    Peter Michaux
    Jun 6, 2007
Loading...

Share This Page