数据：

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. Monkey&Monkey Runner使用

    adb shell monkey -p com.ajb.sp -s 500 --ignore-crashes --ignore-timeouts --monitor-native-crashes -v ...

  2. Linux 系统配置

    centos 7 防火墙和端口配置开启redis端口,修改防火墙配置文件 vi /etc/sysconfig/iptables 加入端口配置 -A RH-Firewall-1-INPUT -m sta ...

  3. [SoapUI] 循环遍历某个Test Case下的所有Test Step,将Cookie传递给这些Test Step

    import com.eviware.soapui.support.types.StringToStringMap //Get cookie's value from the project leve ...

  4. 使用第三方库连接MySql数据库：PyMysql库和Pandas库

    使用PyMysql库和Pandas库链接Mysql 1 系统环境 系统版本:Win10 64位 Mysql版本: 8.0.15 MySQL Community Server - GPL pymysql ...

  5. MySQL InnoDB的一些参数说明

    参考:http://addls.com/mysql-innodb-%E4%B9%8B-ibdata1-%E7%98%A6%E8%BA%AB%E5%A4%A7%E6%B3%95.html # 备份数据库 ...

  6. [GO]goroutine的使用

    package main import ( "fmt" "time" ) func NewTask() { for true { fmt.Println(&qu ...

  7. java.lang.ClassNotFoundException: org.springframework.orm.hibernate3.LocalSessionFactoryBean

    Caused by: java.lang.ClassNotFoundException: org.springframework.orm.hibernate3.LocalSessionFactoryB ...

  8. 关于解决百度sitemap1.0一直提示校验中问题

    实际原因是php设置问题,各个版本对应的设置有些不一样. php版本改成就好了. 修复方法:在插件里找到插件:\baidusubmit\inc.找到sitemap.php,查找curl_setopt( ...

  9. form action 相对路径出问题

    http://www.w3chtml.com/html5/tag/base.html <base> 标签为页面上的所有链接规定默认地址或默认目标. 通常情况下,浏览器会从当前文档的 URL ...

  10. Android编程设置LayoutParams

    RelativeLayout.LayoutParams linearParams = (RelativeLayout.LayoutParams)viewHolder.headerWraper.getL ...