js+json用表格实现简单网站左侧导航

时间:2020-05-12 人气:1

调用很简单，只要将数据组织成json格式即可：格式如下：

整个实例代码如下：供初学者学习！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>simple struct</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style type="text/css"> 
#divtitle{ 
border:solid 1px #000000; 
width:98%; 
height:100px; 
text-align:center; 
} 
#div1{ 
border:solid 1px #000000; 
width:18%; 
height:700px; 
float:left; 
} 
#div2{ 
width:80%; 
height:700px; 
float:left; 
} 
 
.oddrow{ 
margin-top:1px; 
} 
.oddrow td{ 
text-decoration:underline; 
background-color:#666666; 
color:#ccc; 
cursor:pointer; 
} 
 
.evenrow{ 
display:none; 
} 
.evenrow a{ 
margin-left:10px; 
margin-top:2px; 
} 
.evenrow td{ 
background-color:#eee; 
display:block; 
} 
</style> 
<script type="text/javascript"> 
window.onload = function() 
{ 
var tf="if1"; 
var data=[{m:"",s:[{sn:"",st:"//www.qb5200.com"}, 
{sn:"服务器常用软件",st:"http://s.jb51.net"}, 
{sn:"站长查询工具",st:"http://tools.softyun.net"}]}, 
{m:"新闻网站",s:[{sn:"百度",st:"http://news.baidu.com"}, 
{sn:"搜狐",st:"http://news.sohu.com"}, 
{sn:"新浪",st:"http://news.sina.com.cn"}]}, 
{m:"视频网站",s:[{sn:"百度视频",st:"http://vedio.baidu.com"}, 
{sn:"搜狐视频",st:"http://tv.sohu.com"}, 
{sn:"新浪视频",st:"http://vedio.sina.com.cn"}]} 
]; 
var nav=new tableNav("table1",data,tf); 
var bautoClose=false; //打开当前导航条时其它导航条是否关闭 
nav.generateNav(bautoClose); 
} 
function tableNav(tblid,data,ifname) 
{ 
var tbl= document.getElementById(tblid); 
//1.删除表格中存在的行 
for (var t = 0; t < tbl.rows.length;t++){tbl.deleteRow(t);} 
//2.添加数据 
var idx=0; 
for(var t=0;t<data.length;t++) 
{ 
var row=tbl.insertRow(idx); 
var cell=row.insertCell(0); 
cell.innerHTML=data[t].m; 
row.className="oddrow"; 
idx++; 
var row=tbl.insertRow(idx); 
row.className="evenrow"; 
var cell=row.insertCell(0); 
for (var i=0;i<data[t].s.length;i++) 
{ 
cell.innerHTML += "<a href='" +data[t].s[i].st+"' target='"+ ifname +"'>"+ data[t].s[i].sn +"</a><br>"; 
} 
row.style.display="none"; 
idx++; 
} 
this.generateNav=function(bautoClose){ 
for (var i = 0; i < tbl.rows.length; i++) 
if (i % 2==0) 
{ 
var obj = tbl.rows[i].getElementsByTagName("td")[0]; 
obj.onclick = function() 
{ 
var o = this.parentNode.nextSibling; 
if (o.nodeType != 1) 
{ 
o = o.nextSibling; 
} 
o.style.display = (o.style.display == "block") ? "none" : "block" 
if (bautoClose) 
{ 
for (var j = 1; j < tbl.rows.length; j =j+ 2) 
{ 
if (tbl.rows[j] !=o) 
{ 
tbl.rows[j].style.display = "none"; 
} 
} 
} 
} 
} 
}; 
} 
</script> 
</head> 
<body > 
<div> 
<h1>用表格实现简单网站左侧导航</h1> 
</div> 
<div> 
<table id="table1"> 
</table> 
</div> 
<div> 
<iframe id='if1' name='if1' src="" width="100%" height="100%" border="0″ marginwidth="0″ marginheight="0″ allowtransparency="yes"></iframe> 
</div> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

加载全部内容