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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

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