数据：

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. oracle数据库学习记录（持续更新中...）

    --------------------------------------------day1------------------------------------------------- 1. ...

  2. [SoapUI] 通过Groovy获取SoapUI当前Project所在的目录

    import com.eviware.soapui.support.GroovyUtils def groovyUtils = new GroovyUtils( context ) def proje ...

  3. Spring.net方法的替换

    .为什么有时候你再执行某个方法的时候比如某个操作 a.权限验证 b.任务执行 当我执行到这个方法的时候,我可以先验证权限,如果验证不通过则替换到另一个方法去执行 public class MyValu ...

  4. vue项目引入第三方js插件，单个js文件引入成功，使用该插件方法时报错（问题已解决）

    1.引入第三方js文件,npm安装不了 2.控制台显示引入成功 3.在methods下使用 图片看不清请看下面代码 updateTime() { setInterval(()=>{ var cd ...

  5. mysql 事物ACID和隔离级别

    ⑴ 原子性(Atomicity) 原子性是指事务包含的所有操作要么全部成功,要么全部失败回滚,这和前面两篇博客介绍事务的功能是一样的概念,因此事务的操作如果成功就必须要完全应用到数据库,如果操作失败则 ...

  6. idea 提示Resource registered by this uri is not recognized (Settings | Languages & Frameworks | Schemas and DTDs)

    idea出现如上图所示的错误提示时,可以用如下方式解决 点击红色代码部分,鼠标悬停后出现红色灯泡,如下图所示 点击灯泡后,选择第一个选项就可以解决了

  7. Hadoop Shell

    1.常用的一些Shell 再好的博客,都不如官方文档好用: http://hadoop.apache.org/docs/r1.0.4/cn/hdfs_shell.html

  8. [可行]setoolkit生成木马软件远程控制实例

    查看原文 选1,social-ensineering attacks 选4,create a payload and listener 选2,Windows Reverse_TCP Meterpret ...

  9. [转]Linux Swap交换分区、交换文件

    free -m 在日常应用中,通过上述命令看到交换空间的使用情况为0,那么你就不需要很大的虚拟内存,甚至可以完全不需要另辟硬盘空间作为虚拟内存.那么,万一有一天你需要了呢,难道要重装系统?大可不必,在 ...

  10. 在Linux上编译Hadoop-2.4.0

    目录 目录 1 1. 前言 1 2. 安装依赖 1 2.1. 安装ProtocolBuffer 2 2.2. 安装CMake 2 2.3. 安装JDK 2 2.4. 安装Maven 3 3. 编译Ha ...