87,904
社区成员
发帖
与我相关
我的任务
分享关于js的树形表的生成
我这里有个这样的树形对象
我现在想有一个函数，使得他可以输出一个HTML的表格，这样会不会很难？
var i1={
id:1,
name:1,
Is:[{
id:2,
name:2
},{
id:3,
name:3,
Is:[{
id:4,
name:4,
Is:[{
id:6,
name:6
},{
id:7,
name:7
}]
},{
id:5,
name:5,
Is:[{
id:8,
name:8
},{
id:9,
name:9
}]
}]
}]
}
我现在想有一个函数，使得他可以输出一个HTML的表格，这样会不会很难？
...全文
请发表友善的回复…
发表回复
正在努力的PP君 2013-01-17
- 打赏
- 举报
非常有用啊！！
似梦飞花 2013-01-16
- 打赏
- 举报
function create(x){
var table=document.createElement("table");
var tr1=document.createElement("tr");
var tr2=document.createElement("tr");
for(var i in x){
if(i=="id"){
var td=document.createElement("td");
td.innerHTML=x[i];
tr1.appendChild(td);
}else if(i=="Is"){
var td=document.createElement("td");
creates(x[i],td);
tr2.appendChild(td);
}
}
table.appendChild(tr1);
table.appendChild(tr2);
document.body.appendChild(table);
}
function creates(x,d){
var table=document.createElement("table");
var tr1=document.createElement("tr");
var tr2=document.createElement("tr");
for(var i=0;i<x.length;i++){
for(var j in x[i]){
if(j=="id"){
var td=document.createElement("td");
td.innerHTML=x[i][j];
tr1.appendChild(td);
}else if(j=="Is"){
var td=document.createElement("td");
creates(x[i][j],td);
tr2.appendChild(td);
}
}
}
table.appendChild(tr1);
table.appendChild(tr2);
d.appendChild(table);
}
window.onload=function(){
create(i1);
}
id为2的没有子对象 所以导致往左漂了 回去看看 先留下bug的代码
正在努力的PP君 2013-01-16
- 打赏
- 举报
表格形式table啊，不是树形菜单的说。
mrtuzi 2013-01-16
- 打赏
- 举报
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type='text/javascript' src='js/jquery-1.4.4.min.js'></script>
</head>
<body>
<div id='tree'></div>
<script>
var data={id:1,name:1,Is:[{id:2,name:2},{id:3,name:3,Is:[{id:4,name:4,Is:[{id:6,name:6},{id:7,name:7}]},{id:5,name:5,Is:[{id:8,name:8},{id:9,name:9}]}]}]};
function buildtree(data,lv){
var rt=[];
if(!lv)rt.push("<div style='padding-left:12px;'> id:"+data.id+"name:"+data.name);
if(data.Is){
for(var i=0;i<data.Is.length;i++){
rt.push("<div style='padding-left:12px;'>"+(i+1==data.Is.length?"└":"├")+" id : "+data.Is[i].id+" , name : "+data.Is[i].name);
if(data.Is[i].Is){
rt.push(buildtree(data.Is[i],1));
}
rt.push("</div>");
}
}
return rt.join('');
}
$('#tree').html(buildtree(data));
</script>
</body>
</html>
已解决
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type='text/javascript' src='js/jquery-1.4.4.min.js'></script>
</head>
<body>
<div id='tree'></div>
<script>
var data={id:1,name:1,Is:[{id:2,name:2},{id:3,name:3,Is:[{id:4,name:4,Is:[{id:6,name:6},{id:7,name:7}]},{id:5,name:5,Is:[{id:8,name:8},{id:9,name:9}]}]}]};
function buildtree(data,lv){
var rt=[];
if(!lv)rt.push("<div style='padding-left:12px;'> id:"+data.id+"name:"+data.name);
if(data.Is){
for(var i=0;i<data.Is.length;i++){
rt.push("<div style='padding-left:12px;'>"+(i+1==data.Is.length?"└":"├")+" id : "+data.Is[i].id+" , name : "+data.Is[i].name);
if(data.Is[i].Is){
rt.push(buildtree(data.Is[i],1));
}
rt.push("</div>");
}
}
return rt.join('');
}
$('#tree').html(buildtree(data));
</script>
</body>
</html>
已解决
正在努力的PP君 2013-01-16
- 打赏
- 举报
bbjbepzz 2013-01-16
- 打赏
- 举报
var i1={
id:1,
name:1,
Is:[{
id:2,
name:2
},{
id:3,
name:3,
Is:[{
id:4,
name:4,
Is:[{
id:6,
name:6
},{
id:7,
name:7
}]
},{
id:5,
name:5,
Is:[{
id:8,
name:8
},{
id:9,
name:9
}]
}]
}]
};
function fn(data , deep){
var split = '';
for(var i = 0 ; i < deep ; ++i){
split+=' ';
}
split+='|-';
console.log(split+data.name);
if(typeof data.Is!='undefined'){
for(var i in data.Is){
fn(data.Is[i] , deep+1);
}
}
}
fn(i1,0);
效果图
打开google浏览器，切换到Console选项卡，看下是不是你要效果。
bbjbepzz 2013-01-16
- 打赏
- 举报
输入什么样的HTML表格？画个效果来
正在努力的PP君 2013-01-16
- 打赏
- 举报
能说的具体点吗？
linbooooo1987 2013-01-16
- 打赏
- 举报
遍历json数据
