Question

请问我有一个问题，我不知道如何解决，因为我对JavaScript不满意。

我试图确保在填写活动日志后，用户选择添加新的活动。先前输入的内容不应清除，而应保留。

现在，输入的内容将清除，这是我不需要的内容。我希望在添加新活动后保留内容。谢谢。

MeetingAttendance

Answer 1

与其直接编辑内部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>

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

1 个答案: