本文目录一览：
- 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()函数内部可以控制张开和收缩的速度。