如何解决动态将项目添加到列表
我编写用于任务管理的CRUD应用程序。我正在创建带有任务列表的表单。没有主任务和子任务,例如
Main quest 1
Sub-task 1
Sub-task 2
Main quest 2
Sub-task 1
Main quest 3
e.t.c...
我编写了一个脚本,使您可以创建具有任意数量的主要任务和附带任务的表单
const ol = document.querySelector('ol');
function addMainQuest() {
let newMain = document.createElement('li');
newMain.innerHTML = '<input name="mainQuest" id="mainQuest" placeholder="Podaj główny cel zadania" class="questListInput mainQuest"><button type="button" onclick="addSecQuest()">Dodaj zad. podrzędne</button>';
ol.append(newMain);
}
function addSecQuest() {
let liLast = document.createElement('li');
liLast.innerHTML = '<input name="secQuest" id="secQuest" placeholder="Podaj podrzędny cel zadania" class="questListInput secondaryQuest">';
ol.append(liLast);
}
<ol id="ol" class="inputList">
<li id="li">
<input type="text" name="mainQuest1" id="mainQuest" placeholder="Podaj główny cel zadania" class="questListInput mainQuest">
<button onclick="addSecQuest()" type="button">Add sec-quest</button>
</li>
</ol>
<button id="addMain" type="button" onclick="addMainQuest()">Add main quest</button>
...但是我有问题。当我创建了多个主任务(例如2个)并且想要将一个子任务添加到1个主任务中时,该子任务将被添加到列表的末尾,在最后一个主任务下。
如何解决?
解决方法
为另一个<ul>
标签添加逻辑和标记,以便您可以使用嵌套列表
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_nested
,您应该创建内部UL并放置LI元素。试试这个
<html>
<body>
<ol id="ol" class="inputList">
<li id="li">
<input type="text" name="mainQuest1" id="mainQuest" placeholder="Podaj główny cel zadania" class="questListInput mainQuest">
<button onclick="addSecQuest(event)" type="button">Add sec-quest</button>
</li>
</ol>
<button id="addMain" type="button" onclick="addMainQuest()">Add main quest</button>
<script>
function addMainQuest() {
let newMain = document.createElement('li');
newMain.innerHTML = '<input name="mainQuest" id="mainQuest" placeholder="Podaj główny cel zadania" class="questListInput mainQuest"><button type="button" onclick="addSecQuest(event)">Dodaj zad. podrzędne</button>'
ol.append(newMain);
}
function addSecQuest(e) {
const currentLi = e.target.parentNode;
let innerUl;
if (currentLi.children.length < 3) { // only input and button
innerUl = document.createElement('ul');
currentLi.append(innerUl);
} else { // input,button and ul
innerUl = currentLi.children[2];
}
let liLast = document.createElement('li');
liLast.innerHTML = '<input name="secQuest" id="secQuest" placeholder="Podaj podrzędny cel zadania" class="questListInput secondaryQuest">';
innerUl.append(liLast);
}
addMainQuest();
</script>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。