2014-11-24 107 views
0

我正在開發一個簡單的工作項目,我的任務是創建一個簡單的單頁Web應用程序,它接受輸入(姓名和三個不同的電話號碼),以及將它們添加到列表中,然後可以將其刪除。動態添加/刪除電話簿應用程序的行

這是我到目前爲止有:

<script type="text/javascript"> 
    function addRow() { 
     var entry = getElementsById("form"); 
     var table = document.getElementById("list"); 
     var newRow = table.insertRow(1); 
     var cell1 = row.insertCell(0); 
     var cell2 = row.insertCell(1); 
     var cell3 = row.insertCell(2); 
     var cell4 = row.insertCell(3); 
     cell1.innerHTML = entry(0); 
     cell2.innerHTML = entry(1); 
     cell3.innerHTML = entry(2); 
     cell4.innerHTML = entry(3); 
    }; 

</script>  
</head> 

<body> 

<h1 id="title">Phonebook 1.0</h1> 

<div id="welcome"> 
    <b id="welcomeText">Welcome to my single-page phone book application.</b> 
</div> 

<table id="list"> 
    <tr> 
     <th class="header"><b>Name</b></th> 
     <th class="header"><b>Home</b></th> 
     <th class="header"><b>Work</b></th> 
     <th class="header"><b>Cell</b></th> 
    </tr> 
    <tr> 
     <td><form id="name"><input type="text" name="name"></form></td> 
     <td><form id="home"><input type="text" name="home"></form></td> 
     <td><form id="work"><input type="text" name="work"></form></td> 
     <td><form id="cell"><input type="text" name="cell"></form></td> 
     <td><button onclick="addRow()">Add</button></td> 
    </tr> 
</table> 

</body> 
</html> 

我似乎無法得到添加一行。任何幫助表示讚賞。

+0

'getElementsById( 「形式」);' - 應該是'document.getElementById' - 元素奇異 - 但你沒有用的'ID的任何元素form'? – tymeJV 2014-11-24 14:24:30

+0

@TheTurbobeef我爲你的問題添加了答案,你能否給出反饋,問題是否解決? – 2014-12-04 20:09:06

回答

0

您需要將表格作爲javascript變量(可能使用document.getElementById())。然後,只需將新行的代碼添加到其innerHTML中。此外,您需要將表格的id屬性設置爲document.getElementById()