<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. ASP.NET Web API自身对CORS的支持: EnableCorsAttribute特性背后的故事

    从编程的角度来讲,ASP.NET Web API针对CORS的实现仅仅涉及到HttpConfiguration的扩展方法EnableCors和EnableCorsAttribute特性.但是整个COR ...

  2. http协议进阶(二)URL与资源

    一.URL的语法  URL是互联网资源的标准化名称 URL提供了一种定位互联网上任意资源的手段,但这些资源要通过不同方案(协议:比如http.ftp.smtp)来访问,因此URL语法会略有差异 大部分 ...

  3. $.getJSON(&#39;url&#39;,function(data){}) 中回调函数不执行

    $.getJSON('url',function(data){}) 中回调函数不执行 url 中的 json 格式不正确 ,浏览器返回并没有报错 {'湖北':[114.11438,30.849429] ...

  4. django开发个人简易Blog——数据模型

    提到数据模型,一定要说一下MVC,MVC框架是现代web开发中最流行的开发框架,它将数据与业务逻辑分开,减小了应用之间的高度耦合.个人非常喜欢MVC开发框架,除了具有上述特性,它使得web开发变得非常 ...

  5. 20个设计精致的用户界面 PSD 源文件免费下载

    今天这篇文章收集了20个新鲜出炉的用户界面 PSD 源文件素材,你可以免费下载使用.这些免费素材不仅能帮助设计师们节省大量的时间,而且能有很好的效果.感谢那些很有才华的设计师分享它们的劳动成果,让更多 ...

  6. 八、RFCOMM

    1.      RFCOMM 先来看看RFCOMM在协议栈层次体系中的位置.从下图可以看出RFCOMM处于传输层.与AVCTP,TCS-BIN处于同一层次.处于其上层的会话层中的OBEX,SPP等大部 ...

  7. ubuntu安装eclipse tomcat的参考网址

    Neither the JAVA_HOME nor the JRE_HOME environment variable is defined解决 - Linux操作系统:Ubuntu_Centos_D ...

  8. EasyUi – 4.datagrid

    测试的时候用Json来测试就好啦. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> ...

  9. java中instanceof和getClass()的区别分析

    class A { } class B extends A { } Object o1 = new A();  Object o2 = new B(); o1 instanceof A => t ...

  10. UITableViewCell的选中时的颜色设置

    转自:http://hi.baidu.com/zhu410289616/item/0de0262910886011097508c2 1.系统默认的颜色设置 //无色 cell.selectionSty ...