添加新的字段集時如何保留先前輸入的內容
[英]How to keep Previous inputted content when a new Fieldset is added
問題描述
請我遇到一個我不知道如何解決的問題，因為我對JavaScript不滿意。
我試圖確保在填寫活動日志后，用戶選擇添加新的活動。 先前輸入的內容不應清除，而應保留。
現在，輸入的內容將清除我不想要的內容。 我希望在添加新活動后保留內容。 謝謝。
<!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>
1 個解決方案
解決方案1
3 已采納 2019-02-27 11:43:31
與其直接編輯內部html（這將重置您的字段），而是創建一個新元素（新的表行），然后使用.appendChild將其附加到您的表中。 見下文。 如果您有任何疑問，請告訴我。
<!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>
在谷歌地圖javascript api中添加新標記時如何隱藏以前的標記
[英]how to hide previous markers when new markers added in google map javascript api
添加新對象時如何防止動態生成的組件重新初始化
[英]How to keep dynamically generated components from re-initializing when a new object is added
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.