英文:
How to make dynamic table using Javascript?
问题
我正在尝试创建一个动态的HTML表格，但我还没有成功。
这是我已经做过的部分：
<table id="myTable"><tr id="tr"><th>学生姓名</th><th>平均分</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="插入新单元格" id="save">+ 插入新单元格</button><button type="button" value="" class="save" onclick="undoTheInsert()" title="撤销最近的操作" id="unsave">× 撤销最近的操作</button><script>var count = 0;function doTheInsert() {let header = $.find("tr[id='tr']")[0];header.append("<th data-id='header'><input type='date'></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>");}}</script>
我想要的是，如果老师点击按钮，它将在日期下面添加文本框，根据学生人数添加多少个文本框。
例如，如果我点击两次“插入新单元格”按钮，我想要的结果如下（我将制作静态结果以澄清我想要的内容）：
但是我得到的结果如下：
更新：
当我尝试了Sir dirkgroten的答案后，我得到了以下结果：
日期将出现在“学生姓名”和“平均分”之间：
英文:
I am trying to create a dynamic html table and i've not been able to do it yet.
i will give what ive done
and this is the code
<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'><input type='date'></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>");}}</script>
what i want is if the teacher click the button it will add textbox under the date, depending on the number of students how many textboxes to add
for example i click twice the button Insert New Cell
this is the result I want, (i will make static result to clarify what i want)
what result ive got
UPDATE:
when I tried the answer of Sir dirkgroten I got this
the date will appear between the Students Name and Average
答案1
得分: 0
Your .append() is applied to a javascript DOM node instead of jQuery element because you index into the jQuery elements.
For example, let header = $("tr#tr") gives you all <tr id="tr"> elements. When you do header[0] this isn't a jQuery element anymore but the JavaScript node. So append() is not the same function you expect:
- In JavaScript,
ParentNode.append(<string>)appends the actual string, as explained here. - In jQuery,
elem.append(<string>)appends the HTML if the string is an htmlString, as explained here.
Your code should be like this:
function doTheInsert(){let header=$("tr#tr"); // same as $.find("tr[id='tr2']")header.append("<th data-id='header'><input type='date'></th>");let rows=$("tr#tr2");rows.append("<td data-id='row'><input type='text'/></td>");}
英文:
Your .append() is applied to a javascript DOM node instead of jQuery element, because you index into the jQuery elements.
For example, let header = $("tr#tr") gives you all <tr id="tr"> elements. When you do header[0] this isn't a jQuery element anymore but the javascript node. So append() is not the same function you expect:
- In javascript,
ParentNode.append(<string>)appends the actual string, as explained here. - In jQuery,
elem.append(<string>)appends the HTML, if the string is an htmlString, as explained here.
Your code should be like this:
function doTheInsert(){let header=$("tr#tr"); // same as $.find("tr[id='tr2']")header.append("<th data-id='header'><input type='date'></th>");let rows=$("tr#tr2");rows.append("<td data-id='row'><input type='text'/></td>");}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论