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 ...
随机推荐
- fastDFS配置及日志查看 所遇到的问题
FastDFS的配置文件在/usr/local/webserver/fastdfs/etc目录下,其中包括 client.conf 客户端上传配置文件 storage.conf 文件存储服 ...
- Git回滚到历史节点(SourceTree篇)
转自:http://blog.csdn.net/u010416101/article/details/78142697.https://www.zhihu.com/question/48178380 ...
- Openssl enc命令
一.简介 enc - 对称加密例程,使用对称密钥对数据进行加解密,特点是速度快,能对大量数据进行处理.算法有流算法和分组加密算法,流算法是逐字节加,由于其容易被破译,现在已很少使用:分组加密算法是将数 ...
- hibernate的hibernate.cfg.properties
1.hibernate.cfg.properties 配置文件要放在工程目录src下,编译的时候会自动放在/bin目录下 ,所以Configuration configuration=new Con ...
- js关系图库：aworkflow
auto-workflow 用于快速构建各种关系图的库,比如流程图,可视化执行流等 github地址:https://github.com/auto-workflow/AWorkflow 快速开始 n ...
- Windows装python
pycharm常用快捷键ctr+alt+shift+l可以快速格式化python安装下载地址https://www.python.org/downloads/release/python-365/ 一 ...
- 洛谷P4234 最小差值生成树（lct动态维护最小生成树）
题目描述 给定一个标号为从 11 到 nn 的.有 mm 条边的无向图,求边权最大值与最小值的差值最小的生成树. 输入输出格式 输入格式: 第一行两个数 n, mn,m ,表示图的点和边的数量. ...
- 阿里云ECS云服务器编译安装PHP遇到virtual memory exhausted: Cannot allocate memory
阿里云编译安装php时遇到virtual memory exhausted: Cannot allocate memory 买了个服务器, 1G 的内存阿里云服务器,编译东西按说应该够了,安装相关的内 ...
- MVC4 Action 方法的执行
1. ActionInvoker 的执行: 在MVC 中 包括Model绑定与验证在内的整个Action的执行是通过一个名为ActionInvoker的组件来完成的. 它同样具有 同步/异步两个版本 ...
- [LeetCode 题解]：Candy
There are N children standing in a line. Each child is assigned a rating value. You are giving candi ...