2012-03-21 125 views
0

我試圖在我的HTML表格中使用Javascript添加一個表格行,但似乎我無法添加。這是爲什麼?使用Javascript動態添加表格行和單元格

<html> 
<head> 
    <title> 
    </title> 
    <script> 
    function addUser(){ 
     var tbl = document.getElementById('datatable'); 
     var lastRow = tbl.rows.length; 

     var iteration = lastRow+1; 
     var row = tbl.insertRow(lastRow); 

     var cellLeft = row.insertCell(0); 
     var textNode = document.createTextNode(iteration); 
     cellLeft.appendChild(textNode);  
    } 
    </script> 
</head> 
    <body> 
    <table border = 1 id = "datatable"> 
     <tr> 
     <td>ID</td> 
     <td>NAME</td> 
     <td>ADDRESS</td> 
     </tr> 
     <tr> 
     <td>1</td> 
     <td>Something</td> 
     <td>Something</td> 
     </tr> 
     <tr> 
     <td>2</td> 
     <td>Foo</td> 
     <td>bar</td> 
     </tr> 
    </table> 

    <form id = "myForm" onsubmit = "addUser()"> 
    ID:<input type = "text" name = "txtID"><br /> 
    NAME:<input type = "text" name = "txtName"><br /> 
    ADDRESS:<input type = "text" name = "txtAddress"><br /> 
    <input type = "submit" value = "Add Item"> 
    </form> 
    </body> 
</html> 
+0

你會得到什麼錯誤? – 2012-03-21 16:03:12

+0

我不知道如何查看錯誤,我正在使用谷歌瀏覽器 – user962206 2012-03-21 16:04:37

+0

ctrl-shift-j顯示javascript控制檯 – 2012-03-21 16:19:59

回答

1

這是因爲你在submiyting一個表單。首先你的AddUSer被調用並且工作,但是頁面被重新加載,你看到的是最初的頁面。

2

你需要的不是提交表格 只是一個簡單的onclick事件可以幫助。

<input type = "button" value = "Add Item" onclick="addUser()">