数据：

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. js中直接对字符串转义-用于solr ulr 关键词转义

    js代码 /* * 获取UTC格式的字符串,参数必须是 */var solrDateFormat = function (o){    var date;    if(typeof o == 'str ...

  2. jqgrid 单元格放超链接文本

    .前台 <%-- builed by manage.aspx.cmt [ver:] at // :: --%> <%@ Page Language="C#" Au ...

  3. HttpClient 上传/下载文件计算文件传输进度

    1.使用ProgressMessageHandler 获取进度 using namespace System.Net.Http; HttpClientHandler hand = new HttpCl ...

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

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

  5. Ubuntu使用tzselect修改时区

    1.命令行运行 sudo tzselect 2.选择洲区(这里选择亚洲Asia) waichung@desktop:~$ sudo tzselect [sudo] password for waich ...

  6. document--文档中的操作，操作属性、操作样式、操作元素

    ---恢复内容开始--- document操作:    1.找元素   getE..    2.操作内容   非表单:innerHtml   表单:value    3.操作属性            ...

  7. Linux 下几个重要目录解释

    linux下把所有的东西都当作文件的,,一个分区想要使用就需要挂载到一个文件夹上,那这个文件夹就叫挂载点,像常用的把 设备/dev/cdrom挂载到/mnt,,,你想问的应该是linux的各目录的解释 ...

  8. strncmp用法说明

    函数原型 int strcmp(char *str1,char * str2,int n) 功能 比较字符串str1和str2的前n个字符. 头文件 #include <string.h> ...

  9. c语言和java以及安卓和苹果

    苹果手机是本地,没有中间环节,速度快,基于Linux系统 安卓是通过虚拟机,影响速度 就像c语言和java c适用于架构小的地方,因为直接编译运行 而java用于架构比较大的地方,启动慢,启动之后效率 ...

  10. linux查看日志文件内容命令tail、cat、tac、head、echo详解

    linux查看日志文件内容命令tail.cat.tac.head.echo tail -f test.log你会看到屏幕不断有内容被打印出来. 这时候中断第一个进程Ctrl-C, ---------- ...