具有选择选项的动态表行

Question

我的html

<select onchange="doTheInsert" id="items">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<table id="myTable">
    <tr>
        <td class="tdnb" colspan="21"><input id="myInput" type="text" placeholder="Search Student" class="search"></td>
      </tr>

      <tr id="tr">
        <td colspan="1" class="tdhead" >Student Name</td>
        <td class="tdcell2">Average</td>
      </tr>

      <tbody>
      {% for student in teacherStudents %}
      <tr>
        <td colspan="1" class="tdcell">{{ student.Students_Enrollment_Records }}</td>
      </tr>
      {% endfor %}
       <tr>
        <td class="tdbtn" colspan="21"><button type="button" class="save">&plus;&nbsp;Save</button>
          &nbsp;<button type="button" class="save">&check;&nbsp;Finalize</button></td>
      </tr>
    </tbody>
  </table>

如果用户选择了选项号1

，如果用户选择了选项编号3

这是我的html脚本

<script>
function doTheInsert() {
  var e = document.getElementById("items");
  var strUser = e.options[e.selectedIndex].text;
  alert(e)
      for (i = 0; i <= strUser-1; i++) {
            var newRow=document.getElementById('tr').insertRow(1);
            newRow.innerHTML = ""<th style='background-color: #ccc;color: #000000;text-align:center;font-size: 16.5px'> <input type='date' name=''style='border: none; font-size:12px; padding: 0; '></th>";

      }
}
</script>