<!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. hdu 2079

    ps:昨天刚做了个母函数的,觉得不太熟,今天又是母函数..很好.. 代码: #include "stdio.h" #include "string.h" ]; ...

  2. UE4 在C++ 动态生成几何、BSP体、Brush ---- Mesh_Generation

    截至UE4  4.10 runtime 无法生成BSP类 ,只能通过自定义的Mesh的Vertex 进行绘制 ( Google 考证,能改UE4源码的请忽略 ) 可用到的 UE4 集成的Render ...

  3. HDU 1198（并查集）

    题意:给你11个图,每一个都有管道,然后给一张由这11个正方形中的n个组成的图,判断有几条连通的管道: 思路:在大一暑假的时候做过这道题,当时是当暴力来做的,正解是并查集,需要进行一下转换: 转换1: ...

  4. 前端开发环境搭建 Grunt Bower、Requirejs 、 Angular

    现在web开发的趋势是前后端分离.前端采用某些js框架,后端采用某些语言提供restful API,两者以json格式进行数据交互. 如果后端采用node.js,则前后端可以使用同一种语言,共享某些可 ...

  5. IOS网络开发（二）

    1 局域网群聊软件 1.1 问题 UDP协议将独立的数据包从一台计算机传输到另外一台计算机,但是并不保证接受方能够接收到该数据包,也不保证接收方所接收到的数据和发送方所发送的数据在内容和顺序上是完全一 ...

  6. 十分钟了解分布式计算:GraphLab

    GraphLab是一个面向大规模机器学习/图计算的分布式内存计算框架,由CMU在2009年开始的一个C++项目,这里的内容是基于论文 Low, Yucheng, et al. "Distri ...

  7. 国内较快的maven镜像

    原文网址:http://www.cnblogs.com/dingyingsi/p/3856456.html 国内连接maven官方的仓库更新依赖库,网速一般很慢,收集一些国内快速的maven仓库镜像以 ...

  8. JQUERY操作html--获取和设置内容、属性、回调函数

    一:jQuery - 获取内容和属性 1.获得内容 - text().html() 以及 val() text() - 返回所选元素的文本内容 html() - 返回所选元素的内容(包括 HTML 标 ...

  9. VSCode用户设置

    // 将设置放入此文件中以覆盖默认设置 { //-------- 搜索配置 -------- "search.exclude": { "**/node_modules&q ...

  10. 原型模式(Prototype Pattern)

    用原型实例指定创建对象的种类,并通过拷贝这些原型创建新的对象. 它通过复制一个已经存在的实例来返回新的实例,而不是新建实例.被复制的实例就是我们所称的原型,这个原型是可定制的. 原型模式多用于创建复杂 ...