<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. directx12中vetex buffer、index buffer和constant buffer绑定piple line的时机

    类别 时机 函数 建Heap vetex buffer 在Draw函数中 ID3D12GraphicsCommandList::IASetVertexBuffer 否 index buffer 在Dr ...

  2. PHP的数组排序函数

    <?php class order{ /** * * 数组排序 * @param array $arr 例如: * array ( array ( 'deskId' => '460646' ...

  3. POJ 3384 Feng Shui --直线切平面

    题意:房间是一个凸多边形,要在里面铺设两条半径为r的圆形地毯,可以重叠,现在要求分别铺设到哪,使地毯所占的地面面积最大. 解法:要使圆形地毯所占面积最大,圆形地毯一定是与边相切的,这样才能使尽量不重叠 ...

  4. 靶形数独(codevs 1174)

    1174 靶形数独 2009年NOIP全国联赛提高组  时间限制: 4 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解  查看运行结果     题目描述 Descri ...

  5. Ubuntu 安装BCM 43142无线网卡驱动

    ubuntu14.04 安装 bcm43142无线网卡 用命令lspci 查看无线网卡类型 然后下载对应的无线网卡驱动. 之后,使用下列命令安装,即可搜索无线热点了: sudo apt-get ins ...

  6. Js日期选择器并自动加入到输入框中

    <html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="con ...

  7. JS 和 Java 中URL特殊字符编码方式

    前几天遇到url特殊字符编码的问题,在这里整理一下: JavaScript 1.  编码 escape(String) 其中某些字符被替换成了十六进制的转义序列. 解码 unescape(String ...

  8. 一、IRIG-B 概念

    参考:http://baike.baidu.com/view/3601618.htm http://wenku.baidu.com/view/7956cd29bd64783e09122bf1.html ...

  9. Windows下搭建Android开发环境

    1.下载eclipse google eclipse,到官网去下载最新版的,推荐java ee版本的,当然你要用android版本或者standard也无妨 2.下载android sdk,安装相关的 ...

  10. centos下安装python

    下载网址:http://ftp.gnu.org/gnu/gdb/ 1.编译python必须安装开发工具 # yum groupinstall "Development tools" ...