JQuery解析Json数据填充到表格

原创 2018年01月12日 16:12:50

步骤:

     1、获取json串

     2、通过json串,动态拼接html语句

     3、通过jquery获取table,然后往table中输出html

<script type="text/javascript">
	function getList() {
		
		$.ajax({
			type : "GET",
			url : "ajaxGet",
			data : {
				method : "query"
			},
			dataType : "json",//返回的数据类型

			success : function(data) {

				var html = '';
				for ( var i = 0; i < data.length; i++) {//循环json对象,拼接tr,td的html
					html = html + '<tr>';
					html = html + '<td>' + data[i].id + '</td>';
					html = html + '<td>' + data[i].username + '</td>';
					html = html + '<td>' + data[i].password + '</td>';
					html = html + '<td>' + data[i].power + '</td>';
					html = html + '<td>' + data[i].name + '</td>';
					html = html + '<td>' + data[i].time + '</td>';
					html = html + '</tr>';
				}
				$('#tr').html(html);//通过jquery方式获取table,并把tr,td的html输出到table中
			},
			error : function() {
				alert("查询失败!");
			}
		});
	}
</script>
<table class="table" id="tr" style="text-align: center;">

	</table>



版权声明:本文为博主原创文章,未经博主允许不得转载。如需转载,请在文章的明显处标明本文链接!

jquery实现json数据填充到table表格中并且实现remove add 数据

题记:最近做关于OpenDaylight的项目,然还用到了一些前端和javaee的相关技术,本代码实现的是通过数据库部分读到的json数据,数据库部分没有写出,填充到table表格中,并且也可以实现t...
  • u011563903
  • u011563903
  • 2015年07月08日 11:05
  • 6682

json数据 填充遍历表格行列 jQuery

var year=${year}; var month=${month}; var jsondata={}; function dataFill(data){ var _month = 4...
  • lgh06
  • lgh06
  • 2014年07月18日 15:19
  • 1591

jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表

从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码。 需求:url:链接     par:ID       sel:下拉列表选择器 function BuildSel...
  • HUXU981598436
  • HUXU981598436
  • 2016年06月16日 19:32
  • 6178

json数据 填充遍历表格行列 jQuery

var year=${year}; var month=${month}; var jsondata={}; function dataFill(data){ var _month = 4...
  • lgh06
  • lgh06
  • 2014年07月18日 15:19
  • 1591

jquery实现json数据填充到table表格中并且实现remove add 数据

题记:最近做关于OpenDaylight的项目,然还用到了一些前端和javaee的相关技术,本代码实现的是通过数据库部分读到的json数据,数据库部分没有写出,填充到table表格中,并且也可以实现t...
  • u011563903
  • u011563903
  • 2015年07月08日 11:05
  • 6682

使用JQuery解析asp.net MVC控制器返回的json数据并用动态生成的表格显示解析的数据

Jqery动态创建表格,使用动态创建的表格显示后台返回的json数据,给动态创建的表格添加id、class等属性...
  • qq_34332010
  • qq_34332010
  • 2016年11月05日 01:03
  • 303

JSON数据转换为表格排序插件jquery Columns

  • 2014年06月30日 10:21
  • 403KB
  • 下载

jQuery表格插件jqGrid之JSON数据

这次真正的用到数据库中的数据了,其实这也是我们用jqGrid的根本,谁本地数据也用这么庞大的插件。 因为jqGrid数据都是异步获取的,其实我们应该首先明白,数据是如何去获取的,jqGrid实例图本...
  • vera514514
  • vera514514
  • 2013年03月25日 15:22
  • 791

Web jquery ajax,EL遍历 js刷新 jquery遍历json数组填充表格 等等随笔

ajaX 局部刷新,循环遍历json数组并填充表格,jquery 遍历,js刷新整个界面 ==F5,使用EL表达c:foreach 是遍历之前要在jsp页面最顶端添加...
  • wangyangyang_n
  • wangyangyang_n
  • 2016年03月31日 15:18
  • 1597

Java解析Excel表格(支持xls和xlsx格式),并转换为Json数据

首先,我们看一下我们程序的结构和运行结果: 1. 项目结构: 2. studen.xlsx视图: 3. user.xls视图: 4. 解析结果: (1)students.xlsx ...
  • sunnyzyq
  • sunnyzyq
  • 2017年03月20日 19:12
  • 507
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQuery解析Json数据填充到表格
举报原因:
原因补充:

(最多只允许输入30个字)