使用JSON数据在bootstrap构建dom列表

最新推荐文章于 2020-11-27 02:16:25 发布
最新推荐文章于 2020-11-27 02:16:25 发布
阅读量530 收藏
点赞数
文章标签： json bootstrap ajax 

<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="css/bootstrap.min.css" rel="stylesheet" />
		<script src="js/jquery-3.4.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
		<script type="text/javascript">
			$(function() {
				$.ajax({
					url: '',
					type: 'get',
					dataType: 'json',
					success: function(result) {
						weiceshi(result)
					}
				})

			})
		</script>
		<script type="text/javascript">
			function weiceshi(result) {
				/* 从服务器获得数据时,把json换成result */
				var json = [{
						"username": "xiaoming",
						"password": "toor",
						"sex": "男",
						"tel": "17853312734"
					},
					{
						"username": "xiaohong",
						"password": "toor",
						"sex": "女",
						"tel": "17853312734"
					}
				]
				console.log(json)
				$.each(json, function(index, element) {
					console.log(index + '------' + element.username)
					var userid = $("<td></td>").append(index + 1)
					var username = $("<td></td>").append(element.username)
					var passworrd = $("<td></td>").append(element.password)
					var sex = $("<td></td>").append(element.sex)
					var tel = $("<td></td>").append(element.tel)
					var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm").
					append($("<span></spane>").addClass("glyphicon-pencil")).append("编辑")

					var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm").
					append($("<span></spane>").addClass("glyphicon-trash")).append("删除")
					$("<tr></tr>").append(userid).append(username).append(passworrd).append(sex).append(tel).append(delBtn).append(
						editBtn).appendTo("#user_table tbody")
				})
			}
		</script>
	</head>
	<body>
		<div id="" class="panel panel-default">
			<div class="panel-heading">
				<div class="panel-title">
					用户信息
				</div>
			</div>
			<div class="panel-body">
				<div class="container">
					<!-- 按钮 -->
					<div class="row">
						<div class="col-md-4 col-md-offset-8">
							<button type="button" class="btn btn-primary">新增</button>
							<button type="button" class="btn btn-danger">删除</button>
						</div>
					</div>
					<!-- 显示表格 -->
					<div class="row">
						<div class="col-md-12">
							<table class="table table-hover" id="user_table">
								<thead>
									<tr>
										<th>#</th>
										<th>username</th>
										<th>password</th>
										<th>sex</th>
										<th>tel</th>
										<th>operation</th>
									</tr>
								</thead>
								<tbody>
								</tbody>
							</table>
						</div>
					</div>
					<!-- 显示分页信息 -->
					<div class="row">
						<div class="col-md-6">
							当前
						</div>
						<div class="col-md-6">
							当前
						</div>
					</div>
				</div>
			</div>
		</div>
		<button id="dian" "weiceshi()">测试</button>
	</body>
</html>
多喝水水水
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Javascript 通过json自动生成Dom的代码
01-19
json转html 三重奏 原料:json 代码如下: var json={ ‘div’:{id:’flower’,className:”a1″,sub:[ { ‘ul’:{id:’flower1′,className:[“a2″,”a3”],sub:[ {‘li’:{num:3,con:”内容内容内容”,fn:{‘click’:function(){alert(‘我是LiLi’)}}}} ]} }, { ‘ul’:{id:’flower4′,className:[“a2″,”a3”],sub:[ {‘li’:{num:3,con:”第2轮了”,fn:{‘click’:function(){
JSON&BootStrap简单学习，看这篇就够了！
ityanger的技术栈
02-28 1万+
文章目录1 JSON1.1 什么是JSON1.2 JSON格式2 BootStap2.1 BootStap概述2.1.1 什么是BootStrap2.1.2 BootStrap有什么作用2.1.3 什么是响应式页面2.1.4 BootStrap的中文网2.2 BootStrap的入门开发2.2.1 引入相关的头文件2.2.2 最基本的模板2.3 BootStrap的布局容器2.4 BootStra...
Jquery/Json/BootStrap
qq_40590753的博客
01-16 261
Jquery //正则表达式：https://www.w3cschool.cn/zhengzebiaodashi/ 1.jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 jQuery的字面意思其实就是JavaScript和查询（Query），即用于辅助开发JavaScript的库。 //参考文献：jquery合集：https://ww...
Bootstrap展开收缩显示表格json格式数据.zip
05-23
Bootstrap展开收缩显示表格json格式数据基于Bootstrap3.3.5制作，自适应分辨率，JS函数调用json，动态获取表格数据，双击表格行可折叠关闭表格数据显示。
bootstrap+ssm+ajax+返回json数据
08-15
一个典型的流程可能是这样的：用户在Bootstrap构建的界面中触发Ajax请求，SpringMVC控制器接收到请求后，利用MyBatis执行数据库操作，然后将结果转换成JSON格式返回给前端，前端通过JavaScript解析JSON数据并动态...
html中通过JS获取JSON数据并加载的方法
10-18
在HTML模板中，我们使用了Bootstrap的样式和组件，如`.media`、`.media-left`、`.media-body`等，来创建一个响应式的媒体列表。同时，还添加了一个模态对话框(`modal`)，用于展示视频的详细信息，这可以通过点击图片...
json生成bootstrap无限极菜单
04-14
本篇文章将深入探讨如何使用JSON数据生成Bootstrap的无限极菜单。 首先，我们需要理解JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。在我们的场景...
如何将ajax请求返回的Json格式数据循环输出成table形式
12-03
在这个回调中，我们使用`$.each()`遍历返回的Json数据数组。对于每个数据项，我们构建一个HTML表格行（`<tr>`），其中包含四个单元格（`<td>`），分别对应数据中的`num`、`title`和`credate`字段，以及一个"操作"列...
igorbelem.com:使用ReactJS，Bootstrap构建的个人网站
03-30
【标题】：“igorbelem.com:使用ReactJS，Bootstrap构建的个人网站” 在这个项目中，开发者Igor Belem采用先进的Web开发技术ReactJS和流行的前端框架Bootstrap，构建了一个功能丰富的个人网站。ReactJS是由Facebook...
bootstrap-table动态加载json数据并且支持分页
03-16
bootstrap-table动态加载json数据并且支持分页。摘要必须大于50个字节！
Bootstrap整理的各种后台管理模块和树状结构导航
08-15
Bootstrap整理的各种后台管理模块和树状结构导航
Bootstrap 填充Json数据
热门推荐
lovoo的博客
11-03 1万+
一、如图： 二、html代码：<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%> <div class="content"> <div class="table-responsive"> <div class="container-fluid" >
学习笔记4（json、bootstrap）
qq_43417782的博客
03-20 264
- json: json对象：{} json数组：[{},{},…] 可以通过ajax的get()方法来调用json文件： $(selector).get(url,data,success(response,status,xhr),dataType) //url：必须，规定将请求发送到哪个地址 //data：可选，规定连同请求发送到服务器的数据 //success(response,status,...
bootstrap ACE treeview json生成（Java）
dingct的博客
11-07 552
因项目需要使用到TreeView的数据结构，前端框架使用bootstrap ACE 需要返回固定格式的JSON 数据，在java后台递归处理返回的json。。。如下： { "刑侦": { "text":"刑侦", "type":"folder", "additionalParameters": { "id":"1&
bootstrap3 表单构建器_如何使用 Python 构建 JSON API
weixin_39729115的博客
11-27 67
原文：https://www.freecodecamp.org/news/build-a-simple-json-api-in-python/作者：Peter Gleeson译者：ZHEN PENG校对者：Miya提示：JSON API 规范是一种用于客户端和和服务器之间通信的方式，它使用 JSON 格式来限定两者之间请求和响应的格式。作为一种数据格式，JSON 具有轻量和可读的优势，这...
bootstrap 学习之路 10 (javascript DOM 编程)
wangboa123的专栏
05-29 1658
1  DOM 简介 1.      DOM 包括三部分 core DOM   XML  DOM    HTML DOM(网页编程使用HTML DOM) 2.      Html DOM 定义了对象的属性和访问API 3.      Javascript操作DOM，实际就是对HTML DOM节点的增删改查 add delete get change   2  HTML  节点 2.1 在
bootstrap学习笔记（2）--json数据处理（图书列表）
为梦想而奋斗，无悔_一叶扁舟的点滴成长！
03-12 1891
json数据，采用折叠面板展示书单。 1.html代码： --> component skiff 计算机类
bootstrap前端分页的DOM生成
bluelotos893的博客
04-09 263
前端分页需要的几个数据：记录总条数、每页显示多少条，从第几页开始，最多显示多少个页码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid...
bootstrapTable中传json数据
最新发布
05-26
在 BootstrapTable 中传递 JSON 数据可以使用以下方法： 1. 在 HTML 页面上定义一个表格，使用 BootstrapTable 插件来渲染该表格。 ```html <table id="example" class="table table-striped"></table> ``` 2. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值