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>
</td>
</tr>
</table>
</div>

<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>



[javascript] view plain copy
 print?
(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格式为:
[plain] view plain copy
 print?
[{"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

posted @ 2018-05-29 13:53 星朝阅读(461) 评论(0) 编辑收藏举报

刷新页面返回顶部

星朝

Jquery根据JSON生成Table

公告