jQuery_json创建表格

解析json动态生成表格

HTML结构：

 <table>
     <thead>
         <tr>
           <td>学生</td>
           <td>学号</td>
           <td>成绩</td>
         </tr>
    </thead>
    <tbody id="J_tbody">
    </tbody>
   </table>

CSS：

<style>
   table{
    //消除table边框与td的空隙
     border-collapse: collapse;
     border-spacing: 0;
     border:1px solid #CCC;
}
  tr,td{
    border:1px solid #CCC;
}
    </style>

JS:

   <script>
        $(document).ready(function(){
              var data =[{
                  'name':'ww',
                  'xuehao':'1305020124',
                  'score':'94'
              },{
                  'name':'qianqian',
                  'xuehao':'1305020123',
                  'score':'86'
              },{
                  'name':'peipei',
                  'xuehao':'1305020130',
                  'score': '79'
              }];
           // 第一种方法
            var str = '';
            for (var i = 0; i < data.length; i++) {
                var team = data[i];
                str += '<tr>';
                str += '<td>' + team.name + '</td>';
                str += '<td>' + team.xuehao + '</td>';
                str += '<td>' + team.score + '</td>';
                str += '</tr>'
            }
            $('#J_tbody').html(str);

          //  第二种方法
            for (var i = 0; i < data.length; i++) {
                var team = $('<tr></tr>');
                team.append('<td>' + data[i].name + '</td>');
                team.append('<td>' + data[i].xuehao + '</td>');
                team.append('<td>' + data[i].score + '</td>');
                $('#J_tbody').append(team);
            }
  })
    </script>

效果：

不用Datatable，简单的表格如何解析。如上。