思路：通过cf提供的user.rating的api，加上json动态创建表格来实现。

竞赛清单页面链接

API调用

关于api的调用，通过之前的搭建经验，已经可以了。直接通过ajax实现即可。

json动态表格实现

<html>  
<head>  
<title></title>  
<script type="text/javascript">       
          var jsonArray = [{"编号":"001","名称":"小苹果","描述":"现代神曲，大妈的最爱"},{"编号":"002","名称":"mou宝","描述":"想怎么玩就怎么完"}];  
          var headArray = [];  
          function parseHead(oneRow) {  
                        for ( var i in oneRow) {  
                                headArray[headArray.length] = i;  
                         }  
            }  
            function appendTable() {  
                          parseHead(jsonArray[0]);  
                          var div = document.getElementById("div1");   
                          var table = document.createElement("table");  
                          var thead = document.createElement("tr");  
                          for ( var count = 0; count < headArray.length; count++) {  
                                    var td = document.createElement("th");  
                                    td.innerHTML = headArray[count];  
                                    thead.appendChild(td);  
                           }  
                           table.appendChild(thead);  
                          for ( var tableRowNo = 0; tableRowNo < jsonArray.length; tableRowNo++) {  
                                    var tr = document.createElement("tr");  
                                    for ( var headCount = 0; headCount < headArray.length; headCount++) {  
                                            var cell = document.createElement("td");  
                                            cell.innerHTML = jsonArray[tableRowNo][headArray[headCount]];  
                                            tr.appendChild(cell);  
                                    }  
                                    table.appendChild(tr);  
                         }  
                          div.appendChild(table);  
        }                         

</script>  
    <style>  
        table {  
            width: 600px;  
            padding: 0 ;  
            margin: 100 auto;  
            border-collapse: collapse;  
        }  
        td,th {  
            border: 1px solid #ddd;  
            padding: 6px 6px 6px 12px;  
            color: #4f6b72;  
            text-align: center;  
        }  
        th {  
            background: #d3d3d3;  

        }  
    </style>  
</head>  
<body onload="appendTable(jsonArray);">  
    <div id="div1"></div>  
</body>  
</html>

源码转载于：https://www.cnblogs.com/jpfss/p/9104686.html

这个源码需要一个json文件作为根本来创建表格。

json文件的获取

这一步卡了我将近五个小时。
因为ajax或者是getjson他们获取的json文件都是在回调函数内部。而我找到的这个动态表格的模板需要的是一个json数组。又因为api返回的json格式各不相同，可难为死我这个小白了。索性最后还是解决了。
这里我的解决方案是定义一个字符串，按照json的格式，每次把json中的元素以字符串的形式加进去。最后将整个字符串通过eval函数转化为json格式的变量。用此调用动态创建表格的函数。（当然这个思路并不是一开始就有的，而是摸索了近五个小时得到的解决办法。
思路确定了，接下来实现就方便了。但是还有一些细节需要解决。

json的数据不可以直接当成字符串相加

如果我们直接加，会出现[object]。这时候需要用到一个函数，JSON.stringify()，可以将json转化为字符串的格式供我们相加

ajax中全局变量赋值无效

Ajax是异步操作，也就是说在赋值的时候数据还没提取出来，所以只要改成同步操作就行
调用ajax的时候直接在里面加上async : false,即可。

这里附上我实现这部分的代码，供有相同问题的小伙伴参考

var mid = "[";
$.ajax({
 url: curl,
 dataType: 'json',
  async : false,
 success: function( end ) {
   for(var i=0;i<end.result.length;i++){
             mid+=JSON.stringify(end.result[i])+',';
        }
 },
 error: function( end ) {
   mid="";
 }
});
mid+=']';
var jsonArray=eval('(' + mid + ')');

至此，这个页面的搭建基本就完成了，在美化一下即可。

笔记

var jsonArray=eval('(' + mid + ')'); 讲字符串类型的mid转换为json格式

赏