数据：

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数据放入表格当中的更多相关文章

  1. jQuery 根据JSON数据动态生成表格

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. jQuery利用JSON数据动态生成表格

    <style type="text/css"> table.gridtable { font-family: verdana,arial,sans-serif; fon ...

  3. 用jquery解析JSON数据的方法以及字符串转换成json的3种方法

    用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是 json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject ...

  4. 使用原生javascript和jQuery解析json数据

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式. JSONM文件中包含了关于“名称”和“值”的信息. 有时候我们需要读取JSON格式的数据文件,在jQuer ...

  5. JQuery 获取json数据$.getJSON方法的实例代码

    这篇文章介绍了JQuery 获取json数据$.getJSON方法的实例代码,有需要的朋友可以参考一下 前台: function SelectProject() { var a = new Array ...

  6. js将json数据动态生成表格

    今天开发中遇到需要展示动态数据的问题, 具体要求是后端传来的json字符串,要在前端页面以table表格的形式展示, 其实没啥难的,就是拼接table标签,纯属体力活,于是自己写了个呆萌,保存起来,以 ...

  7. Jquery 返回json数据在IE浏览器中提示下载的问题

    Jquery 返回json数据,IE浏览器提示下载的问题,当提交完数据后返回的本来是json数据的,在火弧里测试正常,解决方法如下 今天遇到Jquery 返回json数据,IE浏览器提示下载的问题,当 ...

  8. json数据的格式，JavaScript、jQuery读取json数据

    JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON的特点: JSON 是纯文本 JSON 具有“自我描述性”(人类可读) JSON 具有层级 ...

  9. C语言：把分数最低的学生数据放入数组b所指的数组中，-从键盘输入若干字符串，写入文件myfile4中，用-1作字符输入结束的标志，

    //学生记录由学号和成绩组成,N名学生的数据已放入主函数中的结构体数组中,fun函数:把分数最低的学生数据放入数组b所指的数组中,分数最低的学生可能不止一个.人数返回. #include <st ...

随机推荐

  1. SQLSERVER Tempdb的作用及优化

    tempdb 系统数据库是可供连接到 SQL Server 实例的所有用户使用的全局资源.tempdb 数据库用于存储下列对象:用户对象.内部对象和版本存储区. 用户对象 用户对象由用户显式创建.这些 ...

  2. Java 8特性

    1. Java8的新特性 1.1. Lambda表达式和函数式接口 最简单的Lambda表达式可以用逗号分隔的参数列表.->符号和功能语句块来表示.示例如下: Arrays.asList( &q ...

  3. CF 438E The Child and Binary Tree

    BZOJ 3625 吐槽 BZOJ上至今没有卡过去,太慢了卡得我不敢交了…… 一件很奇怪的事情就是不管是本地还是自己上传数据到OJ测试都远远没有到达时限. 本题做法 设$f_i$表示权值为$i$的二叉 ...

  4. efcore dbfirst 通过数据库表反向生成model

    创建class library并设置为启动项目 使用nuget控制台,设置当前项目为新建的class library Install-Package Microsoft.EntityFramework ...

  5. hdu 2049 不容易系列之(4)——考新郎 (错排递推)

    当n个编号元素放在n个编号位置,元素编号与位置编号各不对应的方法数用M(n)表示,那么M(n-1)就表示n-1个编号元素放在n-1个编号位置,各不对应的方法数,其它类推. 第一步,把第n个元素放在一个 ...

  6. 4.4.6 数组也能无锁：AtomicIntegerArray

    数组也可以实现cas操作,有以下几个类以及用法如下: public class AtomicTntegerArrayTest { public static void main(String[] ar ...

  7. 如何查找文件中的schema约束

    1.下载一个spring3.2的jar和source 然后打开source的文件(路径:\spring-framework-3.2.5.RELEASE\docs\spring-framework-re ...

  8. Generated by NetworkManager、ubuntu DNS设置丢失（network-manager造成的情况）

    方法一:去掉重启 方法二:卸载network-manager 实测网络不稳,经常掉线(kalinux2.0环境)

  9. 编写高质量代码改善C#程序的157个建议——建议90：不要为抽象类提供公开的构造方法

    建议90:不要为抽象类提供公开的构造方法 首先,抽象类可以有构造方法.即使没有为抽象类指定构造方法,编译器也会为我们生成一个默认的protected的构造方法.下面是一个标准的最简单的抽象类: abs ...

  10. C# 加密(Encrypt) 解密(Decrypt) 操作类 java与 C# 可以相互加密解密

    public sealed class EncryptUtils { #region Base64加密解密 /// <summary> /// Base64加密 /// </summ ...