添加新的字段集时如何保留先前输入的内容

Question

Please I am having an issue which i have no idea on how to solve as I am not good with JavaScript. 请我遇到一个我不知道如何解决的问题，因为我对JavaScript不满意。

I am trying to make sure that when an Activity log has been filled and the user choose to add a new Activity. 我试图确保在填写活动日志后，用户选择添加新的活动。 The previous entered content should not be cleared but should remain. 先前输入的内容不应清除，而应保留。

Right about now the contents inputted clears off which is what I don't want. 现在，输入的内容将清除我不想要的内容。 I want the content to remain when a new activity has been added. 我希望在添加新活动后保留内容。 Thanks. 谢谢。

 <!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 = 6; // 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> <tr> <td>3</td> <td><label>Activity Log: </label><br/><input type="text" name="actlog3" class="required"></td> <td><label>Time: </label><br/><input type="time" name="time3" class="required"></td> </tr> <tr> <td>4</td> <td><label>Activity Log: </label><br/><input type="text" name="actlog4" class="required"></td> <td><label>Time: </label><br/><input type="time" name="time4" class="required"></td> </tr> <tr> <td>5</td> <td><label>Activity Log: </label><br/><input type="text" name="actlog5" class="required"></td> <td><label>Time: </label><br/><input type="time" name="time5" class="required"></td> </tr> </table> <input type="submit" /> </fieldset> </form> <button id="add_activity">Add Activity</button> </div> </div> </div> </body> </html>

Answer 1

Instead of directly editing the inner html, which is going to reset your fields, create a new element (a new table row) and append it to your table with .appendChild. 与其直接编辑内部html（这将重置您的字段），而是创建一个新元素（新的表行），然后使用.appendChild将其附加到您的表中。 See below. 见下文。 Let me know if you have any questions. 如果您有任何疑问，请告诉我。

 <!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 = 6; // 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() { // Create New Table Row Element var newNode = document.createElement('tr'); // Set the Inner HTML of that element newNode.innerHTML = '<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>'; // Append the element to the tracklistTable tracklistTable.appendChild(newNode); // 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> <tr> <td>3</td> <td><label>Activity Log: </label><br/><input type="text" name="actlog3" class="required"></td> <td><label>Time: </label><br/><input type="time" name="time3" class="required"></td> </tr> <tr> <td>4</td> <td><label>Activity Log: </label><br/><input type="text" name="actlog4" class="required"></td> <td><label>Time: </label><br/><input type="time" name="time4" class="required"></td> </tr> <tr> <td>5</td> <td><label>Activity Log: </label><br/><input type="text" name="actlog5" class="required"></td> <td><label>Time: </label><br/><input type="time" name="time5" class="required"></td> </tr> </table> <input type="submit" /> </fieldset> </form> <button id="add_activity">Add Activity</button> </div> </div> </div> </body> </html>

添加新的字段集时如何保留先前输入的内容

问题描述

1 个解决方案

解决方案1
3 已采纳 2019-02-27 11:43:31

添加新的字段集时如何保留先前输入的内容

问题描述

1 个解决方案

解决方案1 3 已采纳 2019-02-27 11:43:31

解决方案1
3 已采纳 2019-02-27 11:43:31