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></td>
</tr>
</table>
</div></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<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>";
}
}</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
Jquery根据JSON生成Table的更多相关文章
- 基于jquery的json转table插件jsontotable
分享一款基于jquery的json转table插件jsontotable.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="container ...
- jsp页面根据json数据动态生成table
根据需求由于不同的表要在同一个jsp展示,点击某个表名便显示某张表内容,对于java后台传给jsp页面的json形式的数据是怎么动态生成table的呢? 找了好久,终于找到某位前辈的答案,在此表示衷心 ...
- 基于Jquery+Ajax+Json+存储过程 高效分页
在做后台开发中,都会有大量的列表展示,下面给大家给大家分享一套基于Jquery+Ajax+Json+存储过程高效分页列表,只需要传递几个参数即可.当然代码也有改进的地方,如果大家有更好的方法,愿留下宝 ...
- 用jquery解析JSON数据的方法以及字符串转换成json的3种方法
用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是 json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject ...
- jQuery读取json文件，实现省市区/县（国标）三级联动
最近做一个微信项目,需要用户填写所在的省市区/县,决定使用jQuery读取json文件来实现省市区/县的联动. 其实很简单,jQuery文档也有详细解释: 代码如下: html <table w ...
- php+jquery+ajax+json简单小例子
直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...
- 认识Json解析json生成json
.markdown-body hr::after,.markdown-body::after { clear: both } .loopLine,.messageLine0 { } .markdown ...
- jQuery中json中关于带有html代码网页的处理
昨天在使用jQuery的get方式请求返回json格式数据.然后使用jQuery自带的parseJSON 处理.总是出现这样的错误. 如果返回数据中content改成普通的数据可以通过.找了半天错误, ...
- js控制json生成菜单——自制菜单（一）
此文档解决以下问题: 1.JSON文件的书写方式 2.jQuery.getJSON()的运用 3.jQuery.each()的运用 4.jQuery的DOM 操作方法之一:.append()的运用 5 ...
随机推荐
- HTML/XML转义字符对照表
HTML/XML转义字符对照表 HTML/XML转义字符对照表包含符号.数学符号.希腊字母 .重要的国际标志.ISO 8859-1 (Latin-1)字符集.特殊符号等. 1.特殊字符转义表 字符 十 ...
- 二进制流BinaryFormatter存储读取数据的细节测试
二进制流的使用很方便,为了更好的理解应用它,我创建简单对象开始测试它的增加特性和减少特性. [Serializable] class Data----------开始时候的存储对象 { public ...
- static属性
static 属于全局,也就是类的属性 和方法,换句话说 一个类,不管有多少个实例,却只有一个全局变量 用static修饰的属性和方法称为静态属性和方法 需要注意的是 静态属性和方法属于类方法,加载类 ...
- Objective-c单例模式的正确写法--用dispatch 线程安全
单例模式在iOS开发中可能算是最常用的模式之一了,但是由于oc本身的语言特性,想要写一个正确的单例模式相对来说比较麻烦,这里我就抛砖引玉来聊一聊iOS中单例模式的设计思路.关于单例模式更多的介绍请参考 ...
- Asp.Net识别手机访问
在VS创建WEB应用程序时会有一个微软开发的典型web应用程序 在根目录有个用户控件用来实现切换手机和电脑 其中有个微软开发的类和方法用来专门判断移动设备和桌面设备 在Microsoft.AspNet ...
- 开源项目：JEECG
工程下载:https://github.com/zymqqc/jeecg-1
- [BZOJ1085][SCOI2005]骑士精神 搜索
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1085 大的思路是迭代加深搜索,我们加一个明显的剪枝,当棋盘中位置不对的骑士的数目加上已经走 ...
- 移动端rem
手机有很多尺寸的型号.使用rem来做为大小单位可以达到兼容的目的. 方法一:js测量手机尺寸,设置font-size:为手机屏幕width /10 + ‘px’.即10rem 为手机屏幕width. ...
- CSS定位内容
div.h1 或 p 元素常常被称为块级元素.这意味着这些元素显示为 一块内容,即“块框”.与之相反,span 和 strong 等元素称为“行 内元素”,这是因为它们的内容显示在行中,即 ...
- was--创建概要文件（典型）
1.第一步 2 .创建 3.创建 4 .典型 5 下一步 6 下一步 7.下一步 8.输入用户和密码,下一步 9.下一步 10.下一步 11.下一步 12.下一步 13.下一步 14.创建 ...