首頁猿問 HTML 中的樹形圖

HTML 中的樹形圖

JavaScript

拉莫斯之舞 2023-10-14 18:38:12

如何獲得這個：<ul> <input type="text" placeholder="A" /> <ul> <input type="text" placeholder="B" /> <ul> <input type="text" placeholder="D" /> </ul> <ul> <input type="text" placeholder="E" /> </ul> </ul> <ul> <input type="text" placeholder="C" /> <ul> <input type="text" placeholder="F" /> </ul> <ul> <input type="text" placeholder="G" /> </ul> </ul></ul>從中：const graph = { A: ['B', 'C'], B: ['D', 'E'], C: ['F', 'G'], D: [], E: [], F: [], G: [], }常量圖的意思是： A / \ B C / \ / \ D E F G不使用oop圖。您可以從列表中刪除輸入，然后只需插入頂點的名稱。

查看完整描述

2 回答

大話西游666

TA貢獻1817條經驗獲得超14個贊

你需要通過二叉樹算法即深度優先來繪制dom。

算法是：

繪制根元素，找到它的子元素
從第一個孩子開始，畫它，找到它的孩子
繼續重復步驟 2，直到到達樹的底部。
然后從步驟 2 轉到下一個子項，并執行與第一個子項相同的步驟。

通過執行上述步驟，我認為您可以使用深度優先二叉樹算法輕松繪制 DOM。

看看下面的示例

<body>

</body>

const graph = {

A: ['B', 'C'],

B: ['D', 'E'],

C: ['F', 'G'],

D: [],

E: [],

F: [],

G: [],

}

const root = document.getElementById("root");

const findchildren = (node) => graph[node]

const drawNode = (node) => {

const input = document.createElement("input");

input.setAttribute("type", "text");

input.setAttribute("placeholder", node);

root.appendChild(input);

const children = findchildren(node)

if (children.length > 0) {

children.forEach(item => drawNode(item))

}

drawNode("A")

反對回復 2023-10-14

繁星淼淼

TA貢獻1775條經驗獲得超11個贊

我這樣做，但并不享受。草稿，也許我會改進它，但我已經做了一整天，所以我累了。

const dataset = {

A: ['B', 'C'],

B: ['D', 'E'],

C: ['F', 'G'],

D: [],

E: [],

F: [],

G: [],

}

const $tree = document.querySelector('.tree')

function graphToHTML(node, root) {

if (Object.values(node)[0].length === 0) return

let ul = document.createElement('ul')

let input = document.createElement('input')

input.placeholder = Object.values(node)[0][0]

root.append(ul)

ul.append(input)

graphToHTML(

{ [Object.values(node)[0][0]]: dataset[Object.values(node)[0][0]] },

)

ul = document.createElement('ul')

input = document.createElement('input')

input.placeholder = Object.values(node)[0][1]

root.append(ul)

ul.append(input)

graphToHTML(

{ [Object.values(node)[0][1]]: dataset[Object.values(node)[0][1]] },

)

}

let ul = document.createElement('ul')

let input = document.createElement('input')

input.placeholder = Object.keys(dataset)[0]

ul.append(input)

$tree.append(ul)

graphToHTML({ A: ['B', 'C'] }, ul)

反對回復 2023-10-14

2 回答
0 關注
164 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

HTML 中的樹形圖

HTML 中的樹形圖

2 回答

添加回答