Jquery根据JSON生成Table

最新推荐文章于 2021-08-05 15:39:04 发布
原创 最新推荐文章于 2021-08-05 15:39:04 发布 · 1.2w 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了作者如何作为jQuery新手，通过学习和实践，利用JSON数据在页面上生成表格的过程。在STRUTS1和JSP环境中，他结合HTML、JS和一个名为OM-TREE.JS的UI插件，实现了这一功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

先说下背景

本人属于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>


JS代码为:


(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>";
    	}
    }



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":"朝东"}]



其中左侧树用的是 一个开源的UI插件 叫做OM-TREE.JS

右侧List列表是我自己封装的一个类jsonList

猫儿爷爷
关注
JQ json动态生成table
03-29
JQ后台获取json数据动态生成table
jQuery+json实现动态创建复杂表格table的方法
01-19
本文实例讲述了jQuery+json实现动态创建复杂表格table的方法。分享给大家供大家参考，具体如下： function SetSubTable() { var obj = jQuery.parseJSON($(#SubJsonStrValue).val()); window.ALLPARAMTERS = obj;...
jQuery实现简单的json解析的数据分页显示到表格
weixin_44694069的博客
08-28 833
jQuery实现简单的json解析的数据分页显示到表格这个分页写的比较简单，只用到了for循环 这个分页写的比较简单，只用到了for循环 这是我的事例数据 完成效果： 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分页</title> <script src="jquery-v3.5.1/jquery-
jquery ajax json table 添加行,使用jQuery建立从Ajax响应（JSON）表行
weixin_32259697的博客
08-05 239
78改用的.htmlvar response = "[{"rank":"9","content":"Alon","UID":"5"},{"rank":"6","content":"Tala","UID":"6"}]";// convert string to JSONresponse = $.parseJSON(response);$(function() {$.each(response, fu...
JQuery操作Json循环插入到Table
sunny_lin5的博客
11-03 9575
JQuery操作Json循环插入到Table 1创建Json对象：  var data = " [ {name:'6101',value:'北京市',age:'11'}, {name:'6102',value:'天津市',age:'11'}, {name:'6103',value:'上海市',age:'22'}]";    //创建Json字符串    var dataObj = e
jquery ajax json table 添加行,使用jQuery从AJAX响应构建表行（json）
weixin_33044131的博客
08-05 182
如果我们有这样的JSON数据// JSON Datavar articles = [{"title":"Title 1","url":"URL 1","categories":["jQuery"],"tags":["jquery","json","$.each"]},{"title":"Title 2","url":"URL 2","categories":["Java"],"tags":["ja...
利用jquery根据json文本动态的生成可分组的table，并实现checkbox partial check功能
04-22
以上就是使用jQuery根据JSON文本动态生成可分组表格并实现checkbox partial check功能的基本思路。在实际应用中，你可能还需要考虑其他细节，如表样式的美化、错误处理以及优化性能等。通过这个例子，你可以学习到...
JQuery Ajax动态生成Table表格
12-10
　本示例大概功能是前台通过JQuery的Ajax调用一般处理程序(Handler)，获取表格需要显示的信息，然后转换成json格式返回给前台，前台获取到数据后循环构建表格的行，最好把行附加到表里。 目标： 　a 熟悉简单JQuery ...
jQuery ajax动态生成table功能示例
10-19
在成功获取到服务器返回的数据后，jQuery选择器被用于选取页面中特定的元素，本例中是ID为tableAjax的div元素。随后，通过$.html()方法将构建好的tableStr字符串添加到这个div中，完成动态表格的显示。 4. Ajax与...
jquery实现json数据填充到table表格中并且实现remove add 数据
热门推荐
shufanhao.top Blog
07-08 1万+
题记：最近做关于OpenDaylight的项目，然还用到了一些前端和javaee的相关技术，本代码实现的是通过数据库部分读到的json数据，数据库部分没有写出，填充到table表格中，并且也可以实现table表格中用户自行进行增删等操作，主要是jquery、js.列出但是参考的资料：http://www.cnblogs.com/lxblog/archive/2013/01/11/2856582.h
jquery ajax Datatable与json之间数据转换
09-14
jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换
json-to-table:一个将JSON数据转化为Table格式的工具，支持嵌套、数组
05-14
json-to-table 一个将 JSON 数据转化为表格形式的工具，支持深层次的嵌套。项目主页： 快速上手 渲染效果 如下生成 HTML 的表格源码： const { jsonToHTMLTable } = require('nested-json-to-table') const data = [ { name: 'Jim', age: 18, courses: [ { title: 'English', score: 87 }, { title: 'Chinese', score: 67 } ] }, { name: 'Lucy', age: 17, courses: [ { title: 'Math', score: 97 }, { title: 'Music',
JSON-TO-TABLE:轻松将 JSON 数据直接转换为 HTML 表格
06-22
JSON 到表 轻松将 JSON 数据直接转换为 HTML 表格
html-tableify:将json转换为HTML表
04-29
html-tableify 将json转换为HTML表 安装 $ npm install --save html-tableify 用法 tableify(data[, config]); data：Array（Object）=>表的数据 config：Object =>配置 config.tidy：Boolean =>是否整理输出HTML config.headers：Array（Object）=>标头配置 header.name:String =>键入数据对象 header.align：Enum（'left'|'right'|'center'）=>列的文本对齐 header.title：String =>列标题 const tableify = require ( 'html-tableify' ) ; tableify ( [ { name : 'optionalArra
js根据json生成table方法
lingyi_01的博客
04-07 1387
var table = document.getElementById("tabaleId "); function loadData(json, table) { let tableId = table.id; $("#tabaleId tbody").html(""); var arr = new Array(); var j = 0; for
jQuery利用JSON数据动态生成表格
weixin_33911824的博客
03-24 601
jQuery利用JSON数据动态生成表格 <style type="text/css"> table.gridtable { font-family: verdana,arial,sans-serif; font-size: 11px; color: #333333...
jQuery 根据JSON数据动态生成表格
qq_27361945的博客
01-22 4119
https://www.cnblogs.com/volts0302/p/5258777.html DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"           "http://www.w3.org/TR/html4/loose.dtd"> html> head>     meta http
一段完整的用jquery遍历json并显示到table中的客户端代码
shan1774965666的专栏
09-25 2495
本段代码没有采用jquery传统的写法，因为那样写大括号包小括号，小括号又包大括号实在眼花，所以我把所有函数都分开写了。 本段代码json数据（data表示的数据)是从服务端servlet中取得，如果要在客户端独立运行该段代码，请用自的json数据代替data并在按钮的onclick事件中直接调用myshowJson函数 点击(此处)折叠或打开 !DOCTYPE 
Json与Jquery整合实现动态分页Table插件
在本标题中，“Json jQuery 自动生成table的无刷新分页插件整合pagination”意味着开发者可以利用jQuery和Json来实现一个基于Json数据源的表格，并且通过分页插件进行无刷新的分页功能。 #### 分页插件Pagination的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值