Question

我只想添加文本框或在日期下方，这取决于学生要添加多少文本框的数量，我将在下面使用图片添加示例

 <table  id="myTable">
    <tr id="tr">
    <th>Students Name</th>
    <th>Average</th>
  </tr>
     {% for student in teacherStudents %}
  <tr id="tr2">
    <td id="td">{{ student.Students_Enrollment_Records.Student_Users }}</td>
  </tr>
      {% endfor %}
</table>
<button type="button" value="" class="save" onclick="doTheInsert()" title="Insert New Cell" id="save">&plus;&nbsp;Insert New Cell</button>

<button type="button" value="" class="save" onclick="undoTheInsert()" title="Undo Recent Action" id="unsave">&times;&nbsp;Undo Recent Action</button>
<script>
function doTheInsert() {
  var e = document.getElementById("save");
   for (i = 0; i <= 1-1; i++) {
    var newRow=document.getElementById('tr').insertCell(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>";
    var newrow2=document.getElementById('tr2').insertRow(1);
    newrow2.innerHTML = "<td><input type='text'></td>"
  }
}
</script>
<script>
function undoTheInsert() {
  var e = document.getElementById("unsave");

  for (i = 0; i <= 1-1; i++) {
    var newRow=document.getElementById('tr').deleteCell(1);

    function doTheInsert() {
      var e = document.getElementById("save");
       for (i = 0; i <= 1-1; i++) {
        var newRow=document.getElementById('tr').insertCell(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>";
        var newrow2=document.getElementById('tr2').insertRow(1);
        newrow2.innerHTML = "<td><input type='text'></td>"
      }
    }

    function undoTheInsert() {
      var e = document.getElementById("unsave");

      for (i = 0; i <= 1-1; i++) {
        var newRow=document.getElementById('tr').deleteCell(1);
        var newrow2=document.getElementById('tr2').deleteCell(1);


    }

    }

如果老师单击按钮插入单元格，它将添加日期和文本框数量取决于学生数量

仅在我的情况下显示日期

请帮助我，几乎一个星期，我都试图解决此问题，但失败了。

Answer 1

您是否尝试过使用控制台调试脚本？据我所知，您的脚本正在尝试将tr嵌套到行“ tr2”中，这是不可能的（我认为）。将行更改为

.screenDiv {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.topContainer {
  height: 80%;
}

.botContainer {
  height: 20%;
  border-top: 1px solid black;
}

.topContainer,
.botContainer,
.textBoxes,
.languageDisplay {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.textBoxes {
  height: 50%;
  position: relative;
  top: 50%;
  border: none;
  display: flex;
}

.textContainer {
  width: 80%;
  height: 36%;
  position: relative;
  top: 30%;
  left: 10%;
  right: 20%;
  border: 1px solid #161515;
  display: flex;
  justify-content: space-between;
  border-radius: 3%;
}

.languageDisplay {
  height: 50%;
  position: absolute;
  top: 0%;
  bottom: 50%;
  display: flex;
  justify-content: space-between;
}

.inputLanguage {
  width: 5%;
  height: 20%;
  position: relative;
  top: 30%;
  left: 20%;
}

.outputLanguage {
  width: 5%;
  height: 20%;
  position: relative;
  top: 30%;
  right: 20%;
}

.leftTextBox,
.rightTextBox {
  width: 50%;
  height: 100%;
  display: inline-block;
  border: none;
}

.myText {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: none;
}

将显示您的文本框。此外，我在您的设计中还看到其他一些问题。在遍历老师学生时，您正在创建具有相同ID的多个行和单元格。您在脚本中的for循环将仅被调用一次（从i = 0到i = 0）。而且，据我所知，您的var'e'未使用。

使用JavaScript的Django动态表格行

1 个答案: