jquery将json数据放入表格当中
数据：
var datas = [{
name:"淘宝",
url:"www.taobao.com",
type:"购物网站"
},{
name:"百度",
url:"www.baidu.com",
type:"搜索网站"
},{
name:"腾讯",
url:"www.qq.com",
type:"综合网站"
}];
效果：
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格动态添加数据</title>
<script src="jquery-3.3.1.js"></script>
</head>
<body>
<style>
table{
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
}
th,td{
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th{
background-color: #0A7EC3;
font: bold 16px "微软雅黑";
color: #fff;
}
</style>
<script type="text/javascript">
var datas = [{
name:"淘宝",
url:"www.taobao.com",
type:"购物网站"
},{
name:"百度",
url:"www.baidu.com",
type:"搜索网站"
},{
name:"腾讯",
url:"www.qq.com",
type:"综合网站"
}];
$(function () {
var tableHtml = "";
for(var i in datas){
tableHtml += "<tr>";
tableHtml += "<td>"+ datas[i].name +"</td>";
tableHtml += "<td>"+ datas[i].url +"</td>";
tableHtml += "<td>"+ datas[i].type +"</td>";
tableHtml += "</tr>";
}
$("#aj_data").html(tableHtml);
})
</script>
<table>
<thead>
<tr>
<th width="">标题</th>
<th>url</th>
<th>备注</th>
</tr>
</thead>
<tbody id="aj_data">
</tbody>
</table>
</body>
</html>
jquery将json数据放入表格当中的更多相关文章
- jQuery 根据JSON数据动态生成表格
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- jQuery利用JSON数据动态生成表格
<style type="text/css"> table.gridtable { font-family: verdana,arial,sans-serif; fon ...
- 用jquery解析JSON数据的方法以及字符串转换成json的3种方法
用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是 json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject ...
- 使用原生javascript和jQuery解析json数据
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式. JSONM文件中包含了关于“名称”和“值”的信息. 有时候我们需要读取JSON格式的数据文件,在jQuer ...
- JQuery 获取json数据$.getJSON方法的实例代码
这篇文章介绍了JQuery 获取json数据$.getJSON方法的实例代码,有需要的朋友可以参考一下 前台: function SelectProject() { var a = new Array ...
- js将json数据动态生成表格
今天开发中遇到需要展示动态数据的问题, 具体要求是后端传来的json字符串,要在前端页面以table表格的形式展示, 其实没啥难的,就是拼接table标签,纯属体力活,于是自己写了个呆萌,保存起来,以 ...
- Jquery 返回json数据在IE浏览器中提示下载的问题
Jquery 返回json数据,IE浏览器提示下载的问题,当提交完数据后返回的本来是json数据的,在火弧里测试正常,解决方法如下 今天遇到Jquery 返回json数据,IE浏览器提示下载的问题,当 ...
- json数据的格式，JavaScript、jQuery读取json数据
JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON的特点: JSON 是纯文本 JSON 具有“自我描述性”(人类可读) JSON 具有层级 ...
- C语言：把分数最低的学生数据放入数组b所指的数组中，-从键盘输入若干字符串，写入文件myfile4中，用-1作字符输入结束的标志，
//学生记录由学号和成绩组成,N名学生的数据已放入主函数中的结构体数组中,fun函数:把分数最低的学生数据放入数组b所指的数组中,分数最低的学生可能不止一个.人数返回. #include <st ...
随机推荐
- vue与django中预防CSRF
一.环境: vue2.0.django 1.10.x.iview 二.django后台处理 1.将django的setting的MIDDLEWARE中加入django.middleware.csrf. ...
- Linux cheat命令
一.简介 cheat是在GNU通用公共许可证下,为Linux命令行用户发行的交互式备忘单应用程序.它提供显示Linux命令使用案例,包括该命令所有的选项和简短但尚可理解的功能. 二.安装配置 安装步骤 ...
- CF 662C Binary Table
用FWT优化计算. 首先发现行数很小,想到一个暴力的方法,就是以一个二进制位$0$表示这一行不翻转而二进制位$1$表示这一行翻转,然后$2^n$枚举出所有行的翻转情况,再$O(m)$计算所有的结果. ...
- 最近公共祖先 LCA Tarjan算法
来自:http://www.cnblogs.com/ylfdrib/archive/2010/11/03/1867901.html 对于一棵有根树,就会有父亲结点,祖先结点,当然最近公共祖先就是这两个 ...
- nginx内置变量详解-乾颐堂
nginx的配置文件中可以使用的内置变量以美元符$开始,也有人叫全局变量.其中,部分预定义的变量的值是可以改变的. $arg_PARAMETER 这个变量值为:GET请求中变量名PARAMETER参数 ...
- 'for each' statements are only available if source level is 5.0
在用foreach的时候,出现以下错误: 错误:Syntax error, 'for each' statements are only available if source level is 5. ...
- ubuntu创建wifi热点plasma-nm
第一步:安装 plasma-nm sudo apt-get install plasma-nm 第二步:启动程序 可以使用 Alt+F2 后,搜索 kde-nm-connection-editor 也 ...
- SecondaryNameNode中的“Inconsistent checkpoint fields”错误原因
该错误原因,可能是因为没有设置好SecondaryNameNode上core-site.xml文件中的"hadoop.tmp.dir". 2014-04-17 11:42:18,1 ...
- WCF服务编程 读书笔记——第1章 WCF基础(2)
续:第1章 WCF基础(1) 元数据交换 服务有两种方案可以发布自己的元数据.一种是基于HTTP-GET协议提供元数据, 另一种则是后面将要讨论的使用专门的终结点的方式.WCF能够为服务自动提供基于H ...
- winform 中TextBox只能输入数字
textBox1.KeyPress+=TextNumber_KeyPress; private void TextNumber_KeyPress(object sender, KeyPressEven ...