2013-03-25 156 views
0

我有以下的HTML代碼,這是一個表,其中包括一些關於用戶的教育領域的表。html表和javascript添加新表下

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

您在控制檯中遇到哪個錯誤? – Saturnix 2013-03-25 16:23:49

+0

添加字段按鈕不會做任何事情,當我按它 – 33528 2013-03-25 16:25:44

+0

我的意思是JavaScript控制檯...沒關係,我只是在本地運行,看到了錯誤。現在寫出答案。 – Saturnix 2013-03-25 16:26:12

回答

1

替換此:

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

與此:

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

,只要你不弄清楚什麼是在JavaScript代碼中的錯誤,你應該檢查控制檯。我不知道您正在使用哪個瀏覽器進行調試,但您可以檢查here在哪裏可以找到javascript控制檯。

你的JavaScript被扔這個錯誤在我的控制檯:

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

這意味着tablenull。當你用getElementById定義表格時,我剛剛看到id實際上並不存在於html頁面中。

若要進一步回覆有關限制表數的問題,請將整個代碼包裝在if語句中並聲明全局變量。

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

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

counter++; 

// paste your actual JS code here 


} 

</SCRIPT> 
+0

完美...順便說一下,你有什麼想法我可以修改代碼,以便用戶只能添加9個表...所以總共是10個表。謝謝... – 33528 2013-03-25 16:31:00

+0

只需添加一個全局變量'counter',每次添加一個表時添加使用counter ++。如果計數器> 9,則提示(「你不能添加更多的表」);否則,添加表格。 – Saturnix 2013-03-25 16:32:59

+0

看到更新的答案... – Saturnix 2013-03-25 16:41:30