我在 HTML 中使用下拉列表动态生成了表格，如何保留该值

Question

祝你今天好，所以我有一个问题。我有一个动态生成的表，就像这样

Number of students: <DropDownlist 1-3>

Each table has:
Name: <input type="text" value="name">
ClassName: <input type="text" value="className">

所以基本上当学生选择 DDL 2 时，表格会生成两个表格，但是假设表格中的填写已经决定再添加一个学生，他们将不得不选择 3. Name 的输入值和由于表单生成新表，前两个的ClassName会丢失。

有什么方法可以保存数据吗？

Answer 1

您可以始终渲染所有三个区域并将它们隐藏（因此用户看不到它们）并禁用它们包含的输入（因此它们不会被提交），而不是删除和添加三个输入区域到 DOM。当用户更改下拉列表时，旧值仍将在 DOM 中。这是一个工作示例（使用 jQuery）：

// toggle "disabled" attributes of all input elements 
// contained in the given parent area
function toggleInputsEnabled_(areaSelector, isEnabled) {
  var inputSelectors = $('input, select, textarea', areaSelector);
  if (isEnabled) {
      inputSelectors.removeAttr('disabled');
  } else {
      inputSelectors.attr('disabled', 'disabled');
  }
}

// shows/enables or hides/disables the student data input areas
// depending on the selected number of students
function toggleStudentInputAreas_(selectedNumberOfStudents) {
  // initially the three input areas are hidden and disabled
   $('#student1Area').hide();
   toggleInputsEnabled_($('#student1Area'), false);
   $('#student2Area').hide();
   toggleInputsEnabled_($('#student2Area'), false);
   $('#student3Area').hide();
   toggleInputsEnabled_($('#student3Area'), false);

   if (selectedNumberOfStudents >= 1) {
       // show and enable inputs for Student 1
       $('#student1Area').show();
       toggleInputsEnabled_($('#student1Area'), true);
   }
   if (selectedNumberOfStudents >= 2) {
       // show and enable inputs for Student 2
       $('#student2Area').show();
       toggleInputsEnabled_($('#student2Area'), true);
   }
   if (selectedNumberOfStudents >= 3) {
       // show and enable inputs for Student 3
       $('#student3Area').show();
       toggleInputsEnabled_($('#student3Area'), true);
   }
}
 
// toggle input areas on dropdown change
$('#numberOfStudents').on('change', function() {
     var selectedNumberOfStudents = $(this).val();
     toggleStudentInputAreas_(selectedNumberOfStudents);
});

// toggle input areas initially
toggleStudentInputAreas_($('#numberOfStudents').val());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<label for="numberOfStudents">Number of students:</label>
<select id="numberOfStudents">
  <option value="0">Please select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
    
<div id="student1Area">
  <label for="student1Name">Student 1 Name:</label>
  <input id="student1Name" type="text"></input>
</div>

<div id="student2Area">
  <label for="student2Name">Student 2 Name:</label>
  <input id="student2Name" type="text"></input>
</div>

<div id="student3Area">
  <label for="student3Name">Student 3 Name:</label>
  <input id="student3Name" type="text"></input>
</div>