使用HTML5,我创建了一个简单的表,该表由一系列对字段(活动日志,时间)组成。我一直在网上搜索如何使用Javascript动态创建字段,但是我只找到了一次创建一个字段(使用getElementById)的方法。问题是我想创建一系列标签。意思是,当用户单击“添加另一个字段”时,我希望JS在表上生成具有一对字段的另一行,而不必对整个表进行硬编码(下面的代码段只有两行,但我可能需要10到15行)。
该表的代码段显示在下面。使用CSS,页面的外观与屏幕截图相同。屏幕截图:
我将不胜感激。提前致谢。
<!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代码中:
<!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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句