<!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. C++虚函数的实现机制示例

    C++虚函数的实现机制是通过一个vtable表,指向子类的虚函数地址. 另外,如果不是虚函数,则不能实现用父类引用调用子类方法. #include <windows.h> #include ...

  2. Android 学习第10课，Android的布局

    Android的布局 线性布局

  3. register_chrdev_region/alloc_chrdev_region和cdev注册字符设备驱动

    内核提供了三个函数来注册一组字符设备编号,这三个函数分别是 register_chrdev_region().alloc_chrdev_region() 和 register_chrdev(). (1 ...

  4. LVS的调度算法

    LVS的调度算法(Scheduling Method)一共有10种 一.静态方法:仅根据算法本身进行调度 1.rr(Round Robin):轮询 2.wrr(Werghted Round Robin ...

  5. VC2010 MFC中实现printf调试功能，即MFC程序利用控制台输出调试信息。

    1.在项目自动生成的stdafx.h文件中添加下面头文件 #include <io.h> #include <fcntl.h> #include <stdio.h> ...

  6. bll编译错误

    如果在项目中 ,bll有函数,却引用报错 原因很可能是因为bll在生成程序集的时候,没有生成好.其中有错误 解决办法. 1.将bll,web,dal重新生成 2.注意bll的生成,该添加的添加,该排除 ...

  7. 为 C# 代码生成 API 文档（译）

    原文地址:http://broadcast.oreilly.com/2010/09/build-html-documentation-for-y.html#comments Sandcastle 功能 ...

  8. 【转】Android M(6.0) 权限爬坑之旅

    原文网址:https://yanlu.me/android-m6-0-permission-chasm/ 有一篇全面介绍Android M 运行时权限文章写的非常全面:Android M 新的运行时权 ...

  9. SQL Server使用convert对datetime日期数据进行获取

    来源:http://database.51cto.com/art/201007/211883.htm 备注:本文的语法讲解确实是比较乱,似乎格式不太严谨.参考时还是以实例验证为准比较好 以下的文章主要 ...

  10. npm以及gulp相关操作

    在工作流相关的第一篇博客中,我们安装了nodejs的环境,那么nodejs自带的npm是一个功能十分强大的管理器,它已经不仅仅是局限于nodejs的版本管理器了,那么当现在我们可以通过npm来下载我们 ...