将一个2级联动的数据用表格的形式显示出来

数据:

id	name	p_id
1	体育	0
2	语文	0
3	数学	0
4	铅球	1
5	排球	1
6	文言文	2
7	函数	3
8	图形面积	3

现在要求将数据库里的这些数据在页面上以列表的方式显示

jsp:

<table  id="body"> 
  <tr>  
<th>学习大类</th>
<th>具体项目</th>
  </tr> 

</table> 

js：//引用了jquery

$(function(){
getType(0);//将初始父节点传进去
});

var typeArray=${typeListJson}//后台获取到的数据json串

 //生成列表
 function getXctype(p_value){
var p_listArray=getListByPvalue(p_value);//获取大类列表
var s_listArray=new Array(p_listArray.length);//生成储存子列表的集合
//循环大类列表，获取其下属的小类
for(var i=0;i<p_listArray.length;i++){
var sarray=getListByPvalue(p_listArray[i].ID);//获取下属小类集合
s_listArray[i]=sarray;
}
 
//对数组进行操作
makeTypeList(p_listArray,s_listArray);
 }
 
 //根据父值获取所属的列表
 function getListByPvalue(p_value){
var array=new Array();
var index=0;
for(var i=0;i<xcTypeArray.length;i++){
if(xcTypeArray[i].P_ID==p_value){
array[index]=xcTypeArray[i];
index++
}
}
return array;
 }
 //根据父数组和子数组生成列表页面
 function makeTypeList(p_listArray,s_listArray){
var str="";//列表语句
for(var i=0;i<p_listArray.length;i++){
var sarray=s_listArray[i];//当前父节点下的子集
//生成列表语句
str+="<tr><td rowspan='"+sarray.length+"'>"+p_listArray[i].NAME+"</td>";
if(sarray.length==0){
str+="<td></td></tr>"
}
for(var k=0;k<sarray.length;k++){
if(k==0){
str+="<td>"+sarray[k].NAME+"</td></tr>";
}else{
str+="<tr ><td>"+sarray[k].NAME+"</td></tr>";
}
 
}
}
 
$('#body').append(str);
 }

最终呈现的效果：

学习大类	具体项目
体育	铅球
	排球
语文	文言文
数学	函数
	图形面积