0

ユーザーの教育に関するいくつかのフィールドを含むテーブルである次のhtmlコードがあります。

<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>

次のJavascriptコードを使用して、ユーザーがこの下に新しいテーブルを追加し、必要に応じて教育に関する詳細を追加できるようにします。Javascriptコードが機能していません。これを修正する方法はありますか？

   <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>
4

1 に答える 1

1

これを置き換えます：

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

これとともに：

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

javascriptコードのエラーがわからないときは、コンソールを確認する必要があります。デバッグに使用しているブラウザはわかりませんが、ここでjavascriptコンソールの場所を確認できます。

あなたのJavaScriptは私のコンソールでこのエラーを投げていました：

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

つまり、tableでしたnull。でテーブルを定義するとgetElementById、HTMLページにIDが実際には存在しなかったことがわかりました。

テーブルの数を制限することについての質問にさらに答えるには、コード全体をifステートメントでラップし、グローバル変数を宣言します。

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

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

counter++;

// paste your actual JS code here


}

</SCRIPT>
于 2013-03-25T16:27:15.370 に答える