//先下载jquery js文件 放入项目中

jsp文件内容

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>用户列表</title>
<script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script> <style>
table {
width: 600px;
padding: 0 ;
margin: 100 auto;
border-collapse: collapse;
}
td,th {
border: 1px solid #ddd;
padding: 6px 6px 6px 12px;
color: #4f6b72;
text-align: center;
}
th {
background: #d3d3d3; }
</style>
</head>
<body onload="appendTable(jsonArray);">
<div id="div1">
<table id="table">
</table> </div>
<script type="text/javascript">
$(document).ready(function(){ }); var jsonArray = [{"主键":"","租户ID":"小苹果","账号":"现代神曲,大妈的最爱","密码":"小00","昵称":"小00","真名":"小00","头像":"小00","邮箱":"小00","手机":"小00","生日":"小00","性别":"小00","角色id":"小00","部门id":"小00",}];
var headArray = [];
function parseHead(oneRow) {
for ( var i in oneRow) {
headArray[headArray.length] = i;
}
}
function appendTable() { $.ajax({
type:"get",
url:"${pageContext.request.contextPath }/getUserInfo.do",
//data:{"id":id},
success:function(data) {
var datas=Array.from(data.data);
//alert(datas);
parseHead(data.data[0]);
var div = document.getElementById("div1");
//var table = document.createElement("table");
var table = document.getElementById("table");
var thead = document.createElement("tr");
for ( var count = 0; count < headArray.length; count++) {
var td = document.createElement("th");
td.innerHTML = headArray[count];
thead.appendChild(td);
}
table.appendChild(thead);
for ( var tableRowNo = 0; tableRowNo < data.data.length; tableRowNo++) {
var tr = document.createElement("tr");
for ( var headCount = 0; headCount < headArray.length; headCount++) {
var cell = document.createElement("td");
cell.innerHTML = data.data[tableRowNo][headArray[headCount]];
tr.appendChild(cell);
}
table.appendChild(tr);
}
div.appendChild(table); }
});
} </script>
</body> </html>

  

将后端返回的数据在jsp中拼接成table列表的更多相关文章

  1. 微信小程序POST请求参数传递不到后台, 前台获取不到后端返回的数据, 以及 post 请求返回 404 但后台能收到数据

    1 微信小程序POST请求参数传递不到后台 需要在微信请求 wx.request 改变默认 header 配置为如下 wx.request({ url: 'test.php', //仅为示例,并非真实 ...

  2. 当后端返回的数据是以属性做开头,怎么用length取值

    在我们前端开发中,一般需要的数据是分条的如 [{},{},{},{}] ,这样的数据方便我们用length取值,尤其是在表格中.在控制台看的时候能轻易的看出1 2 3 4条,但有时候后台返回的数据不是 ...

  3. 服务器返回的数据将Unicode码转成汉字

    当我们请求接口的时候,服务器会返回一些数据,当我们打印的时候就会发现,打印出来的是unicode码,不是汉字. 这时候需要我们自己手动处理一下,让打印的时候输出汉字的格式. 方法如下: 新增一个分类, ...

  4. easyui中加载table列表数据 第一次有数据第二次没有数据问题

    $('#allUsingProductTable').datagrid({  加载数据时,第二加载时table会发生变化会出现找不到问题.如果是弹框没有影响,弹框出现出现列表每次都会执行销毁方法. 解 ...

  5. elementui中的el-table中拼接两个列表字段

    我们知道,在ElementUI中我们是使用下面的语法来展示列表字段的: <el-table :data="yanggbs" stripe style="width: ...

  6. java中根据后端返回的数据加载table列表

    <%//引入 js @ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML& ...

  7. 简单理解SNAT回流中的概念:路由器怎么知道外网返回的数据是局域网中哪台主机的

    内网到外网用的是NAT技术(地址封装)外网到内网用的是端口映射(PNAT)计算机的端口又65535(0-65534),你说的那些有名气的端口大多都是0-1023之间的你说的这个问题很简单,但首先你要懂 ...

  8. 后端返回图片的url,将其转成base64,再次进行上传

      //将图片变成base64再上传(主要是转化来自客户端的图片)  getUrlBase64=(url, ext)=> {     var canvas = document.createEl ...

  9. easyUI之datagrid绑定后端返回数据的两种方式

    先来看一下某一位大佬留下的easyUI的API对datagrid绑定数据的两种方式的介绍. 虽然精简,但是,很具有“师傅领进门,修行靠个人”的精神,先发自内心的赞一个. 但是,很多人和小编一样,第一次 ...

随机推荐

  1. [BUGCASE]前端码案概述

    中医有医案之说,程序会出bug,因此想到将自己在项目中遇到的疑难bug记录下来的想法,出于以下目的: 沉淀经验 通过问题学习 训练解决问题的能力 训练文档写作能力 取名:码案(Bug Case). 医 ...

  2. CentOS下解压缩

    1 #gz 2 //压缩gz格式文件 3 gzip aa 4 //解压缩gz格式文件 5 gunzip -d aa.gz 6 //查看 7 Gunzip -l aa.gz 8 9 #bz 10 //压 ...

  3. 在Mac下配置JDK

    1.下载JDK,例JDK8U144 下载地址https://pan.baidu.com/s/1upjecBzTIMnyz0JmdkYprQ 2.安装 安装后配置JDK环境变量 cd ~ open .b ...

  4. Python超全干货:【二叉树】基础知识大全

    概念 二叉树是每个节点最多有两个子树的树结构.通常子树被称作"左子树"(left subtree)和"右子树"(right subtree) 二叉树的链式存储: ...

  5. python基本输入输出函数

    python程序设计中有三个重要的基本输入.输出函数,用于输入.转换和输出,分别是input(),eval(),print() 1,input()函数 """ input ...

  6. Jmeter(三十一) - 从入门到精通 - Jmeter Http协议录制脚本工具-Badboy4(详解教程)

    1.简介 上一篇文章中宏哥给小伙伴或童鞋们介绍讲解了手动添加Variable list的值,而实际工作中Badboy为我们提供了Variable setter工具,让我们不再使用哪一种比较笨拙的方法了 ...

  7. (九)ELF和动态链接

    前言: 我们都知道我们所写的程序是被编译为一条条的CPU指令去执行的,但是在linux系统下能够运行的程序在windows环境下却运行不起来,但是我们使用的CPU明明是一样的,这又是为什么呢? 一.程 ...

  8. springmvc<一> 一些特殊的Bean

    Special Bean Types        HandlerMapping 基于前置或后置拦截器映射请求到处理器,具体实现方式由子类决定,        两种主要的实现             ...

  9. PyQt(Python+Qt)学习随笔:QTreeWidgetItem项的子项索引、删除子项的方法

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 树型部件QTreeWidget中的QTreeWidgetItem项: 获取子项索引 可通过index ...

  10. C#清除HTML标签方法

    删除字符串中HTML标签代码 public static string ClearHTMLTags1(string HTML) { string[] Regexs ={ @"<scri ...