js代碼寫一棵樹（怎麼用代碼畫一棵樹）

本文目錄一覽：

• 1、js的樹形結構怎麼實現
• 2、js廣度遍歷生成樹,樹的定義
• 3、求JS大神幫忙！如何實現把表格變為一棵樹的樹節點
• 4、求大神指點js生成樹結構
• 5、如何用js實現簡單的樹控件？

js的樹形結構怎麼實現

這個問題，我建議你去下載下樹形菜單。網上已經實現的js很多，下載下來一看就明白了，

js廣度遍歷生成樹,樹的定義

先序，後序，中序針對二叉樹。

深度、廣度針對普通樹。深度遍歷：從樹根開始掃描，頂層掃描完了，從一層最左（也可以右）面的結點往下層掃描，直到下層已無結點，這時所有靠最左（右）的結點全部掃描完畢，從樹梢往上退一層，看這層旁有無兄弟結點，有的話還是一樣從最左（右）邊開始掃描，這是個遞歸概念，利用這一方法來遍歷整棵樹。廣度遍歷：從樹根開始掃描，頂層掃描完了，掃描一層的所有結點，掃描二層的所有結點，，掃描最底層的結點。

求JS大神幫忙！如何實現把表格變為一棵樹的樹節點

!DOCTYPE html

PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“”

meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /

html

head

script

function addrow(){//添加行

var tb = document.getElementById(“tid”);//獲取表格元素

tds =tb.getElementsByTagName(“tr”)[0].getElementsByTagName(“td”);//獲取表格中行的列數

var tr1 = document.createElement(“tr”)//創建行

for(var i=0;itds.length;i++){//創建行中的列

var td1 = document.createElement(“td”);//創建列

var tx1 = document.createTextNode(“行”+(tb.getElementsByTagName(“tr”).length+1)+”列”+(i+1));//創建列中文本元素

td1.appendChild(tx1);//將文本元素添加到列中

tr1.appendChild(td1);//將列元素添加到行中

}

tb.appendChild(tr1);//將行添加到表格中

tb.insertBefore(tr1,tb.getElementsByTagName(“tr”)[1]);

}

function addcol(){//添加列

var tb = document.getElementById(“tid”);//獲取表格元素

trs =tb.getElementsByTagName(“tr”);//獲取表格中的所有行

for(i=0;itrs.length;i++){//為每一行添加一列

var tri = trs[i];

var td1 = document.createElement(“td”);//創建列元素

var tx1 = document.createTextNode(“行”+(i+1)+”列”+(tri.getElementsByTagName(“td”).length+1));

td1.appendChild(tx1);//將文本元素添加到列元素中

tri.appendChild(td1);//將列元素添加到行中

}

}

/script

/head

body

form

input type=”button” value=”添加行” onclick=”addrow()”/

input type=”button” value=”添加列” onclick=”addcol()”/

/form

table border=’1′ bordercolor=’black’ cellpadding=’0′ cellspacing=’0′ id=”tid”

tr td行1列1/tdtd 行1列2/td/tr

tr td行2列1/tdtd 行2列2/td/tr

tr td行3列1/tdtd 行3列2/td/tr

tr td行4列1/tdtd 行4列2/td/tr

/table

/body

/html

這是一個簡單的通過將表格看成一棵樹的寫法

求大神指點js生成樹結構

// 生成樹結構

function tree(list) {

const result = [];

for (let value of list) {

// 排除空字符串的情況

if (!value) {

continue;

}

const values = value.split(‘/’);

// 查找樹結構的當前級別是否已經存在，不存在則創建對象，並添加入列表。

let current = result.find(item = item.name === values[0]);

if (current === void 0) {

current = {};

result.push(current);

}

for (let i = 0, length = values.length; i length; i++) {

current.name = values[i];

if (i length – 1) {

// 如果還有下一級內容，判斷當前是否有 children，沒有則構建.

if (current.children === void 0) {

current.children = [];

}

// 查找下一級對象，為下一遍遍歷構建對象

let nextCurrent = current.children.find(item = item.name === values[i + 1]);

if (nextCurrent === void 0) {

nextCurrent = {};

current.children.push(nextCurrent);

}

current = nextCurrent;

}

}

}

return result;

}

============ 假裝分割線 ===========

以上代碼是生成樹的函數，調用 tree 函數並傳入你的 input 數據，返回值就是生成的樹。百科沒找到傳代碼的地方了。

如何用js實現簡單的樹控件？

我之前寫過一個，很簡單，也就下面幾個函數：

function topOfList()

{

var btn = document.getElementById(‘topOfListBtn’);

if(btn.state == ‘spaned’)

{

var forms = document.getElementsByTagName(‘form’);

var timeSpan = 50;

for(var i = 0;iforms.length;i++)

{

var form = forms[i];

if(form.id.indexOf(‘Top’) -1)

{

ShinkSlowly(form,timeSpan);

timeSpan += 50;

}

}

btn.state = ‘unspaned’;

changeBtnImg(‘topOfListImg’,’img/unspaned.jpg’);

tellConsoleSpanSate();

}

else

{

var forms = document.getElementsByTagName(‘form’);

var timeSpan = 50;

for(var i = 0;iforms.length;i++)

{

var form = forms[i];

if(form.id.indexOf(‘Top’) -1)

{

SpanSlowly(form,timeSpan);

timeSpan += 50;

}

}

btn.state = ‘spaned’;

changeBtnImg(‘topOfListImg’,’img/spaned.jpg’);

tellConsoleSpanSate();

}

}

function bottomOfList()

{

var btn = document.getElementById(‘bottomOfListBtn’);

if(btn.state == ‘spaned’)

{

var forms = document.getElementsByTagName(‘form’);

var timeSpan = 50;

for(var i = 0;iforms.length;i++)

{

var form = forms[i];

if(form.id.indexOf(‘Bottom’) -1)

{

ShinkSlowly(form,timeSpan);

timeSpan += 50;

}

}

btn.state = ‘unspaned’;

changeBtnImg(‘bottomOfListImg’,’img/unspaned.jpg’);

tellConsoleSpanSate();

}

else

{

var forms = document.getElementsByTagName(‘form’);

var timeSpan = 50;

for(var i = 0;iforms.length;i++)

{

var form = forms[i];

if(form.id.indexOf(‘Bottom’) -1)

{

SpanSlowly(form,timeSpan);

timeSpan += 50;

}

}

btn.state = ‘spaned’;

changeBtnImg(‘bottomOfListImg’,’img/spaned.jpg’);

tellConsoleSpanSate();

}

}

function ShinkSlowly(form,timeSpan)//控制按鈕收縮的函數

{

setTimeout(function()

{

form.style.display = ‘none’;

}

,timeSpan);

}

function SpanSlowly(form,timeSpan)//控制按鈕展開的函數

{

setTimeout(function()

{

form.style.display = ”;//alert(form.id);

}

,timeSpan);

}

function changeBtnImg(imgId, imgSrc)

{

document.getElementById(imgId).src=imgSrc;//’img/unspaned.jpg’;’img/spaned.jpg’;

}

其中，imgSrc要換成你硬盤裡存在的圖片路徑。然後在你的+號圖片的單擊事件響應使用topOfList()函數即可，我測試過，可用。ShinkSlowly()函數內部可以控制張開和收縮的速度。