Question

我正在尝试创建一个动态html表，但我还没有做到。

我会给出我所做的事情

这是代码

 <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>

我想要的是，如果老师单击该按钮，它将在日期下方添加文本框，具体取决于学生的数量以添加多少个文本框

例如，我单击两次“插入新单元格”按钮

这是我想要的结果（我将做出静态结果以阐明我想要的东西）

Answer 1

这样的事情还是可以的，但是... atm您的代码正在生成id ='tr2'的多个元素，因此不理想

<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>
    var count=0;
    function doTheInsert()
    {
        let header=$.find("tr[id='tr']")[0];
        header.append("<th data-id='header'>dd/mm/yyyy</th>")
        let rows=$.find("tr[id='tr2']");
        for (let i=0; i<rows.length; i++)
        {
            rows[i].append("<td data-id='row'><input type='text'/></td>");
        }
    }
    function undoTheInsert()
    {
        let header=$.find("tr[id='tr'] th[data-id='header']")[0];
        if (header!=null)
        {
            $(header).remove();
        }
        let rows=$.find("tr[id='tr2']");
        for (let i=0; i<rows.length; i++)
        {
            let row=rows[i].find("td[data-id='row']")[0];
            if (row!=null)
            {
                $(row).remove();
            }
        }
    }
</script>

如何制作动态表格？

1 个答案: