jQuery利用JSON数据动态生成表格

<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>