一、页面数据是数据库查出来的，后台先将数据存入一个List，然后传到前台供使用：页面效果如下

 

二、页面代码如下： 

<script type="text/javascript">

$(function(){//页面一加载完就自动执行该方法
 	});
	$.post("${pageContext.request.contextPath}/zp/siteinformation",{},function(data){
		var sitelist=data.sitelist;	
		creatfor(sitelist);		 
	}); 
	
});

  function opendd(id){ //点击展开之后调用该方法，状态未读改成已读
	 // $("#main").empty();//清空div
	  $.post("${pageContext.request.contextPath}/zp/updmsg",{		  
		  'updid':id		  		  
	  },function(data){
		 		  
	  },"json")
  } 
  
 
 function creatfor(list){  //这里是生成组件的方法，list是上面的sitelist对应
	 
	 for(var i=0;i<list.length;i++){
		var dl=$("<dl>");
		var dt=$("<dt>",{
			'class':'un clearfix'
		});
		var span=$("<span>",{
			'class':'btn'
		});
		var span1=$("<span>",{
			'class':'text',
			text:'展开',
			onclick:"opendd("+list[i].myNewsId+")" 
		});
		
		var span2=$("<span>",{
			text:list[i].myNewsTitle
		});
		var span3=$("<span>",{
			'class':'time',
			text:list[i].myNewsSendtime	
		});
		
		var span4;
		if(list[i].myNewsStatus==1){
			
			span4=$("<span>",{
				style:'width:27px; height:20px;background-color: #cf2501;color: white;margin-left:40px;',
				text:'已读'
			});	
		}
		if(list[i].myNewsStatus==0){
			span4=$("<span>",{
				style:'width:27px; height:20px;background-color: #cf2501;color: white;margin-left:40px;',
				text:'未读'
			});	
		}
		
		var dd=$("<dd>");
		var p=$("<p>",{
			text:list[i].myNewsMessage
		});
		
		span.append(span1);  //依次加进去
		
		dt.append(span); 
		dt.append(span2);
		dt.append(span3);
		dt.append(span4);
		dl.append(dt);
		dd.append(p);
		dl.append(dd);
		
		$("#main").append(dl);
		
	}
 }
 
 </script>