<!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. sql datetime操作

    Sql Server中的日期与时间函数 SQL中的时间函数非常有用,特别是在我们进行初始赋值.复杂查询的时候,就显得特别方便. 1.获得系统当前时间 select getdate()  2.DateN ...

  2. js---html---body标签

    <body bgcolor="背景颜色" background="背景图片" text="文本颜色" link="连接文件颜 ...

  3. 黑马程序员——【Java基础】——泛型、Utilities工具类、其他对象API

    ---------- android培训.java培训.期待与您交流! ---------- 一.泛型 (一)泛型概述 1.泛型:JDK1.5版本以后出现的新特性,用于解决安全问题,是一个类型安全机制 ...

  4. 用meta-data配置参数

    在接入第三方渠道SDK的时候,经常会看到其配置文件AndroidManifest.xml有类似如下的定义: <!-- appid --> <meta-data android:nam ...

  5. oc实例变量初始化方法

    1 使用实例setter方法 默认初始化方法 + setName:xxx setAge:xxx 2 使用实例功能类方法,默认初始化方法 + setName:xxx age:xxx3 使用实例初始化方法 ...

  6. 数据获取以及处理系统 --- 功能规格说明书V2.0

    产品规格说明书: 版本号: V2.0 版本说明: Version 1.0 简单得需求分析以及构思,初稿形成 Version 2.0 细化beta阶段设计,增加典型用户尝尽以及功能罗列 1. 引言 1. ...

  7. Spring概况

    1. Spring是什么 Spring是一个开源框架,为了解决企业应用开发的复杂性而创建的,但现在已经不止于企业应用. 是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器框架. ——从大小与开 ...

  8. ASP.NET中数据邦定效率问题的一点看法 - 转载(自由的天空)

    在 做Asp.NET开发的时候经常用到DataList.Repeater等,用这些控件的时候经常用到数据邦定,很多程序员都是按照MS提供的方 法<%#DataBinder.Eval(Contai ...

  9. 2017.1.8a版给信息源新增：max_len、max_db字段

    2017.1.8a版程序给信息源增加max_len.max_db字段,分别用于控制:获取条数.数据库保留条数. max_len的说明见此图: max_db的说明见此图: 当max_len和max_db ...

  10. dbms_stats包更新、导出、导入、锁定统计信息

    dbms_stats包问世以后,我们可通过一种新的方式来为CBO收集统计数据.目前,已经不再推荐使用老式的Analyze分析表和dbms_utility方法来生成CBO统计数据.dbms_stats能 ...