[英]Dynamically adding items to the list
我為任務管理編寫 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>
……但我有個問題。 當我創建了 1 個以上的主任務(例如 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.