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

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>

　　

posted on 2016-03-24 14:17 飘扬De黑夜 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/volts0302/p/5315362.html