Jquery根据JSON生成Table

先说下背景

本人属于juqery小白中的极品小白.基本对于JS jquery这些不懂.用到时候基本百度下 拿过来改改OK. 上面这东西让我弄了三天.可能对于其他人来说 一天就搞定了 .看来还真得去学一下juqery一下了.  废话不多说了.

系统目前使用的是STRUTS1 界面为JSP

HTML代码为:

<div id="content" class="content">

		    <table id="body-table">

		        <tr>

		            <td class="left-panel" valign="top">

		                <ul id="navtree" style="float:left;">

		                </ul>

		            </td>

		            <td class="center-panel" valign="top">

		                <div style="float:right;">

		                     <table id="table1" width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="b5d6e6">

							  <tr>

							  	<td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">大厦</span></div></td>

					            <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">楼层</span></div></td>

					            <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">房间</span></div></td>

					            <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">类型</span></div></td>

					            <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">朝向</span></div></td>

					            <td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">1床</span></div></td>

					          	<td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">2床</span></div></td>

					          	<td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">3床</span></div></td>

					          	<td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">4床</span></div></td>

					          	<td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">5床</span></div></td>

					          	<td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">6床</span></div></td>

					          	<td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">7床</span></div></td>

					          	<td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">8床</span></div></td>

					          	<td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">9床</span></div></td>

					          	<td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">10床</span></div></td>

					          	<td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">11床</span></div></td>

					          	<td width="5%" height="22" background="./../images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">12床</span></div></td>

							  </tr>

							</table>

		                </div>
	            &lt;/td&gt;

	        &lt;/tr&gt;

    	&lt;/table&gt;

    &lt;/div&gt;</pre><br><br><p><strong><span style="font-size:18px;">JS代码为:</span></strong></p>



(function ($) {
$.jsonList = function (obj) {
this.listTable = function () {     //this.testFun方法，加上了this，就是公有方法了，外部可以访问。
// alert(obj1.floorId + "," + obj2.houseId);
var action = obj.action ;
alert(obj.action);
alert("a= " + obj.floorId);
if(obj.action == 'floor'){
action = "bedlist";
}else{
action = "bedInit";
obj.floorId = obj.houseId;
}
alert("b= " + obj.floorId);
$.post("getBed.jsp",{
floorId:obj.floorId,
action:action
},function(data,status){
$("#table1  tr:not(:first)").empty();
for(var i=0;i<eval(data).length;i++){
var bedsSize=eval(data)[i].beds.length;
var trBegin ="<tr>";
var td1 = "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>"+eval(data)[i].houseName+"</span></div></td>";
var td2 = "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>"+eval(data)[i].floorName+"</span></div></td>";
var td3 = "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>"+eval(data)[i].roomName+"</span></div></td>";
var td4 = "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>"+eval(data)[i].roomNum+"</span></div></td>";
var td5 = "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>"+eval(data)[i].roomType+"</span></div></td>";
var beds ="";
for( var h=0;h<bedsSize; h++){
//var subTd = "<td style=\"background:yellow\" onclick='testAlert(\""+eval(data)[i].beds[h].opName+"\")'>"+eval(data)[i].beds[h].status+"</td>";
var subTd = statusColor(eval(data)[i].beds[h].status,eval(data)[i].beds[h].opName);
beds+=subTd;
}
var trEnd ="</tr>";
var room = trBegin + td1 + td2 + td3 + td4 + td5 + beds + trEnd;
$("#table1").append(room);
}
});
};
};
})(jQuery);
$(document).ready(function(){
$("#navtree").omTree({
dataSource : 'getBed.jsp?action=houselist',
showIcon:false,
lineHover:true,
onSelect: function(nodedata){
if(!nodedata.children && nodedata.text){
alert("楼层ID = "+nodedata.floorId);
var a = new $.jsonList({ floorId: nodedata.floorId,action:"floor" });
a.listTable();
}else {
alert("大厦ID = "+nodedata.houseId);
var a = new $.jsonList({ houseId: nodedata.houseId, action:"house"});
a.listTable();
}
}
});
$.post("getBed.jsp",{
floorId:"1",
action:"bedlist"
},function(data,status){
for(var i=0;i<eval(data).length;i++){
var bedsSize=eval(data)[i].beds.length;
var trBegin ="<tr>";
var td1 = "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>"+eval(data)[i].houseName+"</span></div></td>";
var td2 = "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>"+eval(data)[i].floorName+"</span></div></td>";
var td3 = "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>"+eval(data)[i].roomName+"</span></div></td>";
var td4 = "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>"+eval(data)[i].roomNum+"</span></div></td>";
var td5 = "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>"+eval(data)[i].roomType+"</span></div></td>";
var beds ="";
for( var h=0;h<bedsSize; h++){
//var subTd = "<td style=\"background:yellow\" onclick='testAlert(\""+eval(data)[i].beds[h].opName+"\")'>"+eval(data)[i].beds[h].status+"</td>";
var subTd = statusColor(eval(data)[i].beds[h].status,eval(data)[i].beds[h].opName);
beds+=subTd;
}
var trEnd ="</tr>";
var room = trBegin + td1 + td2 + td3 + td4 + td5 + beds + trEnd;
$("#table1").append(room);
}
});
});
function testAlert(obj){
if(obj == ''){
alert("没有信息哦");
return;
}
alert(obj);
}
//床位状态:0,空闲;1,使用;2,预约;3,请假;4,试住;
function statusColor(status,opName){
if( status == 0){
return "<td height=\"20\" bgcolor=\"#FFFFFF\" style=\"background:#66B3FF\" onclick='testAlert(\""+opName+"\")'><div align=\"center\"><span class=\"STYLE1\">空闲</span></div></td>";
}else if( status == 1){
return "<td height=\"20\" bgcolor=\"#FFFFFF\" style=\"background:Crimson\" onclick='testAlert(\""+opName+"\")'><div align=\"center\"><span class=\"STYLE1\">使用</span></div></td>";
}else if( status == 2){
return "<td height=\"20\" bgcolor=\"#FFFFFF\" style=\"background:Orange\" onclick='testAlert(\""+opName+"\")'><div align=\"center\"><span class=\"STYLE1\">预约</span></div></td>";
}else if( status == 3){
return "<td height=\"20\" bgcolor=\"#FFFFFF\" style=\"background:Yellow\" onclick='testAlert(\""+opName+"\")'><div align=\"center\"><span class=\"STYLE1\">请假</span></div></td>";
}else if( status == 4){
return "<td height=\"20\" bgcolor=\"#FFFFFF\" style=\"background:HotPink\" onclick='testAlert(\""+opName+"\")'><div align=\"center\"><span class=\"STYLE1\">试住</span></div></td>";
}
}

(function ($) {

        $.jsonList = function (obj) {

            this.listTable = function () {     //this.testFun方法，加上了this，就是公有方法了，外部可以访问。

               // alert(obj1.floorId + "," + obj2.houseId);

            	var action = obj.action ;

            	alert(obj.action);

            	alert("a= " + obj.floorId);

            	if(obj.action == 'floor'){

            		action = "bedlist";

            	}else{

            		action = "bedInit";

            		obj.floorId = obj.houseId;

            	}

            	alert("b= " + obj.floorId);

                $.post("getBed.jsp",{

	           	     floorId:obj.floorId,

	           	     action:action
       	    },function(data,status){

       	    	$("#table1  tr:not(:first)").empty();

       	      for(var i=0;i&lt;eval(data).length;i++){

       	    	  var bedsSize=eval(data)[i].beds.length; 

       	    	  var trBegin ="&lt;tr&gt;";

       	    	  var td1 = "&lt;td height='20' bgcolor='#FFFFFF'&gt;&lt;div align='center'&gt;&lt;span class='STYLE1'&gt;"+eval(data)[i].houseName+"&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;";

       	    	  var td2 = "&lt;td height='20' bgcolor='#FFFFFF'&gt;&lt;div align='center'&gt;&lt;span class='STYLE1'&gt;"+eval(data)[i].floorName+"&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;";

       	    	  var td3 = "&lt;td height='20' bgcolor='#FFFFFF'&gt;&lt;div align='center'&gt;&lt;span class='STYLE1'&gt;"+eval(data)[i].roomName+"&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;";

       	    	  var td4 = "&lt;td height='20' bgcolor='#FFFFFF'&gt;&lt;div align='center'&gt;&lt;span class='STYLE1'&gt;"+eval(data)[i].roomNum+"&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;";

       	    	  var td5 = "&lt;td height='20' bgcolor='#FFFFFF'&gt;&lt;div align='center'&gt;&lt;span class='STYLE1'&gt;"+eval(data)[i].roomType+"&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;";

       	    	  var beds ="";

       	    	  for( var h=0;h&lt;bedsSize; h++){

           	    	  //var subTd = "&lt;td style=\"background:yellow\" onclick='testAlert(\""+eval(data)[i].beds[h].opName+"\")'&gt;"+eval(data)[i].beds[h].status+"&lt;/td&gt;";

           	    	  var subTd = statusColor(eval(data)[i].beds[h].status,eval(data)[i].beds[h].opName);

           	    	  beds+=subTd;

       	    	  }

       	    	  var trEnd ="&lt;/tr&gt;";

       	    	  var room = trBegin + td1 + td2 + td3 + td4 + td5 + beds + trEnd;

       	    	  $("#table1").append(room);

       	      }

       	    });

        };

    };

})(jQuery);

$(document).ready(function(){

    	$("#navtree").omTree({

            dataSource : 'getBed.jsp?action=houselist',

            showIcon:false,

            lineHover:true,

            onSelect: function(nodedata){

            	if(!nodedata.children &amp;&amp; nodedata.text){

            		alert("楼层ID = "+nodedata.floorId);

            		var a = new $.jsonList({ floorId: nodedata.floorId,action:"floor" });

            		a.listTable();

            	}else {

            		alert("大厦ID = "+nodedata.houseId);

            		var a = new $.jsonList({ houseId: nodedata.houseId, action:"house"});

            		a.listTable();

            	}

            }

        });

    	 $.post("getBed.jsp",{

    	     floorId:"1",

    	     action:"bedlist"

    	    },function(data,status){

    	      for(var i=0;i&lt;eval(data).length;i++){

    	    	  var bedsSize=eval(data)[i].beds.length; 

    	    	  var trBegin ="&lt;tr&gt;";

    	    	  var td1 = "&lt;td height='20' bgcolor='#FFFFFF'&gt;&lt;div align='center'&gt;&lt;span class='STYLE1'&gt;"+eval(data)[i].houseName+"&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;";

    	    	  var td2 = "&lt;td height='20' bgcolor='#FFFFFF'&gt;&lt;div align='center'&gt;&lt;span class='STYLE1'&gt;"+eval(data)[i].floorName+"&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;";

    	    	  var td3 = "&lt;td height='20' bgcolor='#FFFFFF'&gt;&lt;div align='center'&gt;&lt;span class='STYLE1'&gt;"+eval(data)[i].roomName+"&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;";

    	    	  var td4 = "&lt;td height='20' bgcolor='#FFFFFF'&gt;&lt;div align='center'&gt;&lt;span class='STYLE1'&gt;"+eval(data)[i].roomNum+"&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;";

    	    	  var td5 = "&lt;td height='20' bgcolor='#FFFFFF'&gt;&lt;div align='center'&gt;&lt;span class='STYLE1'&gt;"+eval(data)[i].roomType+"&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;";

    	    	  var beds ="";

    	    	  for( var h=0;h&lt;bedsSize; h++){

        	    	  //var subTd = "&lt;td style=\"background:yellow\" onclick='testAlert(\""+eval(data)[i].beds[h].opName+"\")'&gt;"+eval(data)[i].beds[h].status+"&lt;/td&gt;";

        	    	  var subTd = statusColor(eval(data)[i].beds[h].status,eval(data)[i].beds[h].opName);

        	    	  beds+=subTd;

    	    	  }

    	    	  var trEnd ="&lt;/tr&gt;";

    	    	  var room = trBegin + td1 + td2 + td3 + td4 + td5 + beds + trEnd;

    	    	  $("#table1").append(room);

    	      }

    	    });

});

function testAlert(obj){

	if(obj == ''){

		alert("没有信息哦");

		return;

	}

	alert(obj);

}

//床位状态:0,空闲;1,使用;2,预约;3,请假;4,试住;

function statusColor(status,opName){

	if( status == 0){

		return "&lt;td height=\"20\" bgcolor=\"#FFFFFF\" style=\"background:#66B3FF\" onclick='testAlert(\""+opName+"\")'&gt;&lt;div align=\"center\"&gt;&lt;span class=\"STYLE1\"&gt;空闲&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;";

	}else if( status == 1){

		return "&lt;td height=\"20\" bgcolor=\"#FFFFFF\" style=\"background:Crimson\" onclick='testAlert(\""+opName+"\")'&gt;&lt;div align=\"center\"&gt;&lt;span class=\"STYLE1\"&gt;使用&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;";

	}else if( status == 2){

		return "&lt;td height=\"20\" bgcolor=\"#FFFFFF\" style=\"background:Orange\" onclick='testAlert(\""+opName+"\")'&gt;&lt;div align=\"center\"&gt;&lt;span class=\"STYLE1\"&gt;预约&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;";

	}else if( status == 3){

		return "&lt;td height=\"20\" bgcolor=\"#FFFFFF\" style=\"background:Yellow\" onclick='testAlert(\""+opName+"\")'&gt;&lt;div align=\"center\"&gt;&lt;span class=\"STYLE1\"&gt;请假&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;";

	}else if( status == 4){

		return "&lt;td height=\"20\" bgcolor=\"#FFFFFF\" style=\"background:HotPink\" onclick='testAlert(\""+opName+"\")'&gt;&lt;div align=\"center\"&gt;&lt;span class=\"STYLE1\"&gt;试住&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;";

	}

}</pre><br><br><p><br></p>


JSON格式为:

[{"beds":[{"bedId":1,"bedIndex":1,"opId":0,"opName":"","status":0},{"bedId":2,"bedIndex":2,"opId":0,"opName":"","status":1},{"bedId":3,"bedIndex":3,"opId":0,"opName":"","status":2},{"bedId":4,"bedIndex":4,"opId":0,"opName":"","status":3},{"bedId":5,"bedIndex":5,"opId":0,"opName":"","status":4},{"bedId":6,"bedIndex":6,"opId":0,"opName":"","status":0}],"floorName":"一层","houseName":"哈哈楼","roomName":"测试房间","roomNum":"六人间","roomType":"朝北"},{"beds":[{"bedId":7,"bedIndex":1,"opId":0,"opName":"","status":0}],"floorName":"二层","houseName":"哈哈楼","roomName":"1101号房","roomNum":"单人间","roomType":"朝东"}]

[{"beds":[{"bedId":1,"bedIndex":1,"opId":0,"opName":"","status":0},{"bedId":2,"bedIndex":2,"opId":0,"opName":"","status":1},{"bedId":3,"bedIndex":3,"opId":0,"opName":"","status":2},{"bedId":4,"bedIndex":4,"opId":0,"opName":"","status":3},{"bedId":5,"bedIndex":5,"opId":0,"opName":"","status":4},{"bedId":6,"bedIndex":6,"opId":0,"opName":"","status":0}],"floorName":"一层","houseName":"哈哈楼","roomName":"测试房间","roomNum":"六人间","roomType":"朝北"},{"beds":[{"bedId":7,"bedIndex":1,"opId":0,"opName":"","status":0}],"floorName":"二层","houseName":"哈哈楼","roomName":"1101号房","roomNum":"单人间","roomType":"朝东"}]

其中左侧树用的是 一个开源的UI插件 叫做OM-TREE.JS
右侧List列表是我自己封装的一个类jsonList