HTML：使用JS动态添加元素 [英] HTML: Add elements dynamically using JS
问题描述
使用HTML5，我创建了一个简单的表，其中包含一系列配对字段（活动日志，时间）。我一直在网上搜索如何使用Javascript动态创建字段，但我只发现了如何一次创建一个字段（使用getElementById）。问题是我想创建一系列标签。这意味着，当用户点击添加另一个字段时，我希望JS在表格上生成另一行，带有一对字段，而不必对整个表格进行硬编码（下面的代码段只有两行，但我可能需要10-15行。
Working with HTML5, I have created a simple table that consists of a series of pair fields (Activity log, time). I've been searching on the web how to dynamically create fields using Javascript, but I've only found how to create one field at a time (using getElementById). The thing is that I'd like to create a series of tags. Meaning, when the user clicks on "add another field", I'd like that JS generates another row on the table, with a pair of fields, instead of having to hard code the complete table (the snippet below only has two rows, but I'd probably need 10-15 rows).
下表显示了该表代码的片段。使用CSS，页面看起来就像在屏幕截图上一样。
截图：
The snippet of the code for the table appears below. Using CSS the page looks as it's on the screen shot. screenshot:
我很感激任何帮助。
提前致谢。
I'd appreciate any help. Thanks in advance.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Activity Log</title>
<link href="styles.css" rel="stylesheet">
<script type="text/javascript" language="javascript" src="script.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="leftcol">
<form name='mainForm' id='mainForm' method="get" action="http://www.randyconnolly.com/tests/process.php">
<fieldset>
<legend>Input Activity Logs</legend>
<table id=tracklist>
<tr>
<th colspan="3">Track List: </th>
</tr>
<tr>
<td>1</td>
<td><label>Activity Log: </label><br/><input type="text" name="actlog1" class="required"></td>
<td><label>Time: </label><br/><input type="time" name="time1" class="required"></td>
</tr>
<tr>
<td>2</td>
<td><label>Activity Log: </label><br/><input type="text" name="actlog2" class="required"></td>
<td><label>Time: </label><br/><input type="time" name="time2" class="required"></td>
</tr>
</table>
<input type="submit" />
</fieldset>
</form>
</div>
</div>
</div>
</body>
</html>
推荐答案
您可以使用连接到添加活动按钮的.innerHTML + =方法。每次单击该按钮时，都会添加具有正确索引编号的新表行。这是一个完全有效的示例 - 为了简单起见并且只有一个文件，我将javascript直接包含在HTML代码中：
You can use the .innerHTML += method wired up to an "Add Activity" button. Each time you click the button a new table row is added with the correct index numbers. Here is a fully working example - for the sake of simplicity and having only one file, I've included the javascript directly in the HTML code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Activity Log</title>
<script>
// Wait until the window finishes loaded before executing any script
window.onload = function() {
// Initialize the activityNumber
var activityNumber = 3;
// Select the add_activity button
var addButton = document.getElementById("add_activity");
// Select the table element
var tracklistTable = document.getElementById("tracklist");
// Attach handler to the button click event
addButton.onclick = function() {
// Add a new row to the table using the correct activityNumber
tracklistTable.innerHTML += '<tr><td>' + activityNumber + '</td><td><label>Activity Log: </label><br/><input type="text" name="actlog' + activityNumber + '" class="required"></td><td><label>Time: </label><br/><input type="time" name="time' + activityNumber + '" class="required"></td></tr>';
// Increment the activityNumber
activityNumber += 1;
}
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="leftcol">
<form name='mainForm' id='mainForm' method="get" action="#">
<fieldset>
<legend>Input Activity Logs</legend>
<table id="tracklist">
<tr>
<th colspan="3">Track List: </th>
</tr>
<tr>
<td>1</td>
<td><label>Activity Log: </label><br/><input type="text" name="actlog1" class="required"></td>
<td><label>Time: </label><br/><input type="time" name="time1" class="required"></td>
</tr>
<tr>
<td>2</td>
<td><label>Activity Log: </label><br/><input type="text" name="actlog2" class="required"></td>
<td><label>Time: </label><br/><input type="time" name="time2" class="required"></td>
</tr>
</table>
<input type="submit" />
</fieldset>
</form>
<button id="add_activity">Add Activity</button>
</div>
</div>
</div>
</body>
</html>
这篇关于HTML：使用JS动态添加元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![截图](\"http://i.stack.imgur.com/BFnXo.png\"){kind=link}