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 ...
随机推荐
- solr自动提示 - jquery ui autocomplete
需求: 搜索框中 输入部分关键词之后,有下拉联想提示.选中提示,使用鼠标或者使用enter键,则触发搜索功能.没有选择搜索提示,使用部分输入关键词作为搜索,直接使用enter键也能触发搜索功能.整个过 ...
- SLAM Course - WS13/14 by Cyrill Stachniss (1) 课程资源汇总
本帖是作者学习SLAM 课程笔记的资源帖,汇总了SLAM Course - WS13/14 by Cyrill Stachniss 的相关资源. 1. 课程网站,有相关课件作业和教学视频下载. htt ...
- Spring在代码中获取bean的几种方式（转）
获取spring中bean的方式总结: 方法一:在初始化时保存ApplicationContext对象 ApplicationContext ac = new FileSystemXmlApplica ...
- windows编程之内核对象
学好windows编程,理解内核对象还是至关重要的(●'◡'●).闲话不多说,下面先来了解一下关于内核对象的知识: 内核对象(kernel object):内核对象是用于管理进 ...
- Openssl oscp命令
一.简介 ocsp,在线证书状态命,能够执行很多OCSP的任务,可以被用于打印请求文件和响应文件, 二.语法 openssl ocsp [-out file] [-issuer file] [-cer ...
- Smarty模板的引用
(1)include用法和php里的include差不多(2)smarty的include还具备自定义属性的功能例如 {include file="header.tpl" titl ...
- CodeForces 690C1 Brain Network (easy) （水题，判断树）
题意:给定 n 条边,判断是不是树. 析:水题,判断是不是树,首先是有没有环,这个可以用并查集来判断,然后就是边数等于顶点数减1. 代码如下: #include <bits/stdc++.h&g ...
- Android canvas bug
安卓4.1.1-4.1.2的webkit在渲染canvas元素时有bug. 具体表现是出现重影,即canvas的clearRect()方法不能彻底清空画布,仍然保留之前某个状态当“背景”. 目前的修复 ...
- C# 释放资源的规范写法
static class CSharp_3 { /* ---------------------------------------- * 以下学习资源的释放:IDispose和析构函数 * 1.ID ...
- SpringMVC源码解读 - HandlerMapping - SimpleUrlHandlerMapping初始化
摘要: SimpleUrlHandlerMapping只是参与Handler的注册,请求映射时由AbstractUrlHandlerMapping搞定. 初始化时,通过setMappings(Prop ...