<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

          "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

    <title>动态创建表格</title>

    <script src="js/jQuery1.10.js"></script>

    <script type="text/javascript">

        function CreateTable() {

            var str = '{ "total": 149, "columns": [{ "field": "EMPLOYEEID", "title": "员工编号" }, { "field": "EMPLOYEENAME", "title": "员工姓名" }],"rows":[{"EMPLOYEEID":"001","EMPLOYEENAME":"小明"},{"EMPLOYEEID":"002","EMPLOYEENAME":"小宏"}]}';

            var data = JSON.parse(str);

            var rowCount = data.rows.length;

            var cellCount = data.columns.length;

            var table = $("<table border=\"1\">");

            table.appendTo($("#createtable"));

            var trHeader = $("<tr></tr>");

            trHeader.appendTo(table);

            for (var j = 0; j < cellCount; j++) {

                var td = $("<td>" + data.columns[j].title + "</td>");

                td.appendTo(trHeader);

            }

            for (var i = 0; i < rowCount; i++) {

                var tr = $("<tr></tr>");

                tr.appendTo(table);

                for (var j = 0; j < cellCount; j++) {

                    var field = data.columns[j].field;

                    var val="";

                    if (data.rows[i][field] != null)

                    {

                        val = data.rows[i][field];

                    }

                    var td = $("<td>" + val + "</td>");

                    td.appendTo(tr);

                }

            }

            $("#createtable").append("</table>");

        }

    </script>

</head>

<body>

    <input type="button" value="添加表格" onclick="CreateTable(5,6)">

    <input type="button" value="添加行">

    <div id="createtable"></div>

    <div id="createrow"></div>

</body>

</html>

jQuery 根据JSON数据动态生成表格的更多相关文章

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

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

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

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

  3. 跨域jsonp+jQuery+json+html动态生成表格

    1.什么是跨域 浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了. 凡是拥有scr这个属性 ...

  4. MVC&JQuery如何根据List动态生成表格

    背景:在编码中,常会遇到根据Ajax的结果动态生成Table的情况,本篇进行简要的说明.这已经是我第4.5篇和Ajax有关的随笔了,互相之间有很多交叠的地方,可自行参考. 后台代码如下: public ...

  5. jsp页面根据json数据动态生成table

    根据需求由于不同的表要在同一个jsp展示,点击某个表名便显示某张表内容,对于java后台传给jsp页面的json形式的数据是怎么动态生成table的呢? 找了好久,终于找到某位前辈的答案,在此表示衷心 ...

  6. jquery将json数据放入表格当中

    数据: var datas = [{ name:"淘宝", url:"www.taobao.com", type:"购物网站" },{ na ...

  7. AJAX请求返回JSON数据动态生成html

    1:DeliveryPersonVO对象 package com.funcanteen.business.entity.delivery.vo; import java.util.List; impo ...

  8. JS动态生成表格后 合并单元格

    JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单 ...

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

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

随机推荐

  1. IP地址的分类——a，b，c 类是如何划分的

    现在的IP网络使用32位地址,以点分十进制表示,如172.16.0.0.地址格式为:IP地址=网络地址+主机地址 或 IP地址=主机地址+子网地址+主机地址. IP地址类型 最初设计互联网络时,为了便 ...

  2. 【Selenium2+Python】常用操作

    Webdriver中比较常用的操作元素的方法: clear()    清除输入框的默认内容 send_keys("xxx")    在一个输入框里输入xx内容 ——如果输入中文,则 ...

  3. join()、implode()函数

    join() 函数 join() 函数把数组元素组合为一个字符串. join() 函数是 implode() 函数的别名. 语法 join(separator,array) 参数 描述 separat ...

  4. HDU 1536 & 1944

    http://acm.hdu.edu.cn/showproblem.php?pid=1536 http://acm.hdu.edu.cn/showproblem.php?pid=1944 一样的题 题 ...

  5. __attribute__ 你知多少？

    GNU C 的一大特色就是__attribute__ 机制.__attribute__ 可以设置函数属性(Function Attribute ).变量属性(Variable Attribute )和 ...

  6. Android-->猜拳小游戏

    --> 简单的 页面跳转 和 点击事件 的实现... --> AndroidManifest.xml <?xml version="1.0" encoding=& ...

  7. bootstrap-9

    图像: bootstrap中有以下几种样式风格: 1.img-responsive:响应式图片,主要针对响应式设计 2.img-rounded:圆角图片 3.img-circle:圆形图片 4.img ...

  8. java common-io jar API

    import org.apache.commons.beanutils.BeanUtils;public class Person { private String name; public Stri ...

  9. javascript中的对象之间继承关系

    相信每个学习过其他语言的同学再去学习JavaScript时就会感觉到诸多的不适应,这真是一个颠覆我们以前的编程思想的一门语言,先不要说它的各种数据类型以及表达式的不同了,最让我们头疼,恐怕就是面向对象 ...

  10. sqlserver2008 ，只能选C盘目录，不能选其它盘目录

    数据库sql2008安装后,无论备份或还原,只能看到C盘,手工输入路径,错误提示如下:尝试打开或创建物理文件 'D:\数据库\db.mdf' 时,CREATE FILE 遇到操作系统错误 5(拒绝访问 ...