<style type="text/css">
    table.gridtable {
        font-family: verdana,arial,sans-serif;
        font-size: 11px;
        color: #333333;
        border-width: 1px;
        border-color: #666666;
        border-collapse: collapse;
    }

        table.gridtable th {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
        }

        table.gridtable td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #ffffff;
        }
</style>
<script src="Scripts/jquery-2.2.1.min.js"></script>
<script src="Scripts/ext.DataTable.js"></script>
<script src="Scripts/jLinq-2.2.1.js"></script>
<script>
    $(document).ready(function () {
        var json = { 'columns': [{ 'FieldID': 'Column1', 'Title': 'Info Header 1' }, { 'FieldID': 'Column2', 'Title': 'Info Header2' }, { 'FieldID': 'Column3', 'Title': 'Info Header3' }], 'rows': [{ 'Column1': '1A', 'Column2': '1B', 'Column3': '1C' }, { 'Column1': '2A', 'Column2': '2B', 'Column3': '2C' }] };
        var th;
        $.each(json.columns, function (colIndex, col) {
            th+="<th>" + col.Title + "</th>";
        });
        $("#myTb").append("<tr>" + th + "</tr>");

        //行遍历
        $.each(json.rows, function (rowIndex, row) {
            var tr;
            //列遍历
            $.each(json.columns, function (colIndex,col) {
                tr+='<td>'+row[col.FieldID]+'</td>'
            })

            $("#myTb").append('<tr>'+tr+'</tr>');
        });

    });
</script>

<!-- Table goes in the document BODY -->
<table class="gridtable" id="myTb">

</table>

  

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

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

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. 利用在线工具根据JSon数据自动生成对应的Java实体类

    如果你希望根据JSon数据自动生成对应的Java实体类,并且希望能进行变量的重命名,那么“JSON To Java”一定适合你.(下面的地址需要FQ) https://jsontojava.appsp ...

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

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

  4. 初探原生js根据json数据动态创建table

    初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...

  5. js动态生成表格

    动态生成表格           *创建一个页面:两个输入框和一个按钮 *代码和步骤                      /*                          1.得到输入的行 ...

  6. 【转】ASP.NET中服务器控件Table动态生成表格及其属性介绍

    下文所有内容转自开源中国:http://www.oschina.net/question/565065_86453#tags_nav ================================= ...

  7. 如何用asp.net MVC框架、highChart库从sql server数据库获取数据动态生成柱状图

    如何用asp.net MVC框架.highChart库从sql server数据库获取数据动态生成柱状图?效果大概是这样的,如图: 请问大侠这个这么实现呢?

  8. JQuery 获取json数据$.getJSON方法的实例代码

    这篇文章介绍了JQuery 获取json数据$.getJSON方法的实例代码,有需要的朋友可以参考一下 前台: function SelectProject() { var a = new Array ...

  9. (转载)PHP 动态生成表格

    (转载)http://hi.baidu.com/shawns/item/c7d51f351c6a0482b711dba6 提要:PHP能够高效地生成HTML代码,其中,动态生成表格是实际应用中经常碰到 ...

随机推荐

  1. magnitude是精确距离,sqrMagnitude是节省CPU的粗略距离,精度有损失

    magnitude是精确距离,sqrMagnitude是节省CPU的粗略距离,精度有损失 CubeA坐标 x:0 y:0.844 z:0 CubeC坐标 x:0 y:0 z:0 Vector3 aaa ...

  2. [转载]—— Android JNI知识点

    Java Native Interface (JNI)标准是java平台的一部分,它允许Java代码和其他语言写的代码进行交互.JNI 是本地编程接口,它使得在 Java 虚拟机 (VM) 内部运行的 ...

  3. HTTP状态码查询

    如果客户端向服务器发出了某项请求要求显示网站上的某个网页,那么,服务器会返回 HTTP 状态代码以响应该请求. 一些常见的状态代码为: 200 - 服务器成功返回网页 403 - 请求的网页禁止访问 ...

  4. iOS - UISearchController

    前言 NS_CLASS_DEPRECATED_IOS(3_0, 8_0, "UISearchDisplayController has been replaced with UISearch ...

  5. 在Ios里UIWebView参入js

    //修改图片大小适应webView宽高度            [webView stringByEvaluatingJavaScriptFromString:       @"var sc ...

  6. jQuery实现表格隔行换色且感应鼠标高亮行变色

    jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51. ...

  7. 基于visual Studio2013解决面试题之1105字符串压缩

     题目

  8. C#编程实践—EventBroker简单实现

    前言 话说EventBroker这玩意已经不是什么新鲜货了,记得第一次接触这玩意是在进第二家公司的时候,公司产品基础架构层中集成了分布式消息中间件,在.net基础服务层中使用EventBroker的模 ...

  9. Nodejs学习笔记(十六)--- Pomelo介绍&amp;入门

    目录 前言&介绍 安装Pomelo 创建项目并启动 创建项目 项目结构说明 启动 测试连接 聊天服务器 新建gate和chat服务器 配置master.json 配置servers.json ...

  10. 洛谷 P2194 HXY烧情侣【Tarjan缩点】 分析+题解代码

    洛谷 P2194 HXY烧情侣[Tarjan缩点] 分析+题解代码 题目描述: 众所周知,HXY已经加入了FFF团.现在她要开始喜(sang)闻(xin)乐(bing)见(kuang)地烧情侣了.这里 ...