动态添加/删除表到电话簿应用程序的行
[英]Dynamically add/remove row to table for phonebook app
问题描述
我正在做一个简单的工作项目，我的任务是创建一个简单的单页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>
我只是似乎无法添加一行。 任何帮助表示赞赏。
2 个解决方案
解决方案1
0 2014-11-24 14:25:44
您需要将表格作为javascript变量获取（可能使用document.getElementById() ）。 然后，只需将新行的代码添加到其innerHTML中。 另外，您需要将表的id属性设置为某种属性，以便可以通过document.getElementById()获得它。
解决方案2
0 2014-11-24 14:28:42
动态将输入框添加/删除到Angular中的表行
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.