html table and Javascript to add new table under this

Question

I have the following html code which is a table including some fields about the education of a user.

<table border="0" style="margin: auto; ">

<td width="60%" >

<fieldset style="width:530px; padding-left:5px; background-color:white " >

    <INPUT type="button" value="Add new Table" onclick="addRow('dataTable')" />

    School/University/College*</br>
    <input name="school_1" type="text" size="73"/>
    </br></br>
    Field of Study</br>
    <input name="field_1" type="text" size="73"/>
    </br></br>
    Specialized subjects</br>
    <input name="specialized_subject_1" type="text" size="73" />
    </br></br>
    Degree</br>
    <input name="degree_1" type="text" size="73"/>
    </br></br>
    Grade</br>
    <input name="grade_1" type="text" size="73" />
    </br></br></br>

        Attended from:&nbsp;<select name="month_1_1"> 
        <option value=" "> EMPTY </option> 
        <option value="January">January</option> 
        </select>

        <select id="year_1_1" name="year_1_1"> 
        <option value=" "> EMPTY </option>
        <option value="2009">2009</option>
       </select>&nbsp;&nbsp;&nbsp;&nbsp;

        Until:&nbsp;<select name="month_1_2"> 
        <option value=" "> EMPTY </option> 
        <option value="January">January</option>                        
        </select>

        <select name="year_1_2"> 
        <option value=" "> EMPTY </option>
        <option value="2009">2009</option>
       </select>&nbsp;&nbsp;    

    </h2></font>
    </fieldset>

</td>

</table>

I am using the following Javascript code in order for the user to add a new table under this, to add more details about his education in case he wants to do it. My Javascript code is not working. Any ideas how to fix this?

   <SCRIPT language="javascript">
      function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var colCount = table.rows[0].cells.length;

        for(var i=0; i<colCount; i++) {

            var newcell = row.insertCell(i);

            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
            //alert(newcell.childNodes);
            switch(newcell.childNodes[0].type) {
                case "text":
                        newcell.childNodes[0].value = "";
                        break;
                case "select-one":
                        newcell.childNodes[0].selectedIndex = 0;
                        break;
            }
        }
    }


</SCRIPT>

Answer 1

replace this:

<table border="0" style="margin: auto; ">

with this:

<table border="0" style="margin: auto;" id="dataTable">

whenever you don't figure out what is the error in a javascript code, you should check the console. I don't know which browser you're using for debugging, but you may check here where to find the javascript console.

your javascript was throwing this error in my console:

TypeError: 'null' is not an object (evaluating 'table.rows')

which means table was null. As you define table with getElementById I just saw the id didn't actually existed in the html page.

To further reply your question about limiting the number of tables, wrap your entire code in an if statement and declare a global variable.

<SCRIPT language="javascript">
var counter = 0;

if (counter > 9)
alert("can't add more");
else {

counter++;

// paste your actual JS code here


}

</SCRIPT>