数据：

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. Openssl rsautl命令

    一.简介 rsautl指令能够使用RSA算法签名,验证身份,加密/解密数据 二.语法 openssl rsautl [-in file] [-out file] [-inkey file] [-pas ...

  2. [原创]升级SOUI WKE以支持_blank

    由于WKE的精简模式,导致原有的SOUI不支持针对诸多内容的调用,此处针对WKE的部分内容做升级,以支持对应的功能. 目的:使WKE可以_blank弹出新窗口. 由国人 海绵宝宝维护的WKE新分支:h ...

  3. Perl语言编程>>学习笔记2

    1. Perl中变量的常用表示  ${var} 相当于 $var  $Dog::days  在Dog包里面的变量$days  $#days  @days 的最后一个索引  ]  $days 引用的数组 ...

  4. 【转】JAVA 并发编程-多个线程之间共享数据

    原文地址:http://blog.csdn.net/hejingyuan6/article/details/47053409# 多线程共享数据的方式: 1,如果每个线程执行的代码相同,可以使用同一个R ...

  5. [转][译] 存储引擎原理：LSM

    原译文地址:http://www.tuicool.com/articles/qqQV7za http://www.zhihu.com/question/19887265 http://blog.csd ...

  6. python中用ElementTree.iterparse()读取xml文件中的多层节点

    我在使用Python解析比较大型的xml文件时,为了提高效率,决定使用iterparse()方法,但是发现根据网上的例子:每次if event == 'end':之后elem.clear()或者是每次 ...

  7. css长按复制内容

    复制2333333 <style> p { -webkit-user-select: none; user-select: none; } p>i { -webkit-user-se ...

  8. Session概述

    session即HttpContext.Session 属性,命名空间System.Web 我们都知道,Cookie信息全部存放于客户端,Session则只是将一个ID存放在客户端做为与服务端验证的标 ...

  9. Python数据模型建立

    基本结构AutoField(Field) - int自增列,必须填入参数 primary_key=True BigAutoField(AutoField) - bigint自增列,必须填入参数 pri ...

  10. oracle goldengate的两种用法

    此文已由作者赵欣授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 自从oracle收购来了goldengate这款产品并以后对它做了一系列改进后,有非常多的用户使用它做数据迁移 ...