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 ...
随机推荐
- chrome crx插件存档
https://github.com/mdamien/chrome-extensions-archive
- [SoapUI] 设置Excel的第一行为自动过滤
import org.apache.poi.ss.util.* XSSFWorkbook workbook = new XSSFWorkbook() XSSFSheet sheet = workboo ...
- windows cmd命令相关知识和经验的碎片化记录
1.循环遍历当前文件夹下的所有*.dll文件,并打印其绝对路径和相对路径 ``` for /f "tokens=*" %%a in ('dir /s/b/a-d "*.d ...
- css实现水平伸缩菜单
ul li a{transition:width 500ms ease;} a:hover{width:*;} 高度向上延伸用height:*;margin-top:-*px;//负值实现向上
- Qcreator3.1.2调试器（windows）版本
环境:visual studio 2012 qt:5.3.1 默认的ms版本qtcreator只能使用visual studio的编译器,不能使用调试工具.需要gdb或者cdb进行调试,这里介绍使用的 ...
- windows安装MongoDB进度条卡住，window安装mongo系统错误 2，系统错误5的解决办法(转载)
windows安装MongoDB进度条卡住,window安装mongo系统错误 2,系统错误5的解决办法 转自:https://www.cnblogs.com/sufferingStriver/p/m ...
- 编写高质量代码改善C#程序的157个建议——建议98：用params减少重复参数
建议98:用params减少重复参数 如果方法的参数数目不定,且参数类型一致,则可以使用params关键字减少重复参数声明. void Method1(string str, object a){} ...
- 浅谈tcp_nodelay的作用
今天在用nginx作web缓存的时候,发现在http里加入这样个参数,能有效的提高数据的实时响应性,那就是tcp_nodelay.下面我们来说说tcp_nodelay的原理: TCP_NODELAY和 ...
- WPF学习资源整理
WPF(WindowsPresentation Foundation)是微软推出的基于Windows Vista的用户界面框架,属于.NET Framework 3.0的一部分.它提供了统一的编程模型 ...
- Grails项目开发——前端请求跨域问题
Grails项目开发--前端请求跨域问题 最近做项目采用前后端分离的思想,使用Grails作为后台开发Restful API供前端调用. 在项目开发的过程中,遇到前端没办法通过ajax访问到后台接口的 ...