2012伦敦奥运会奥运奖牌榜调用演示

奖牌榜链接:http://promote.kaiyuan.eu/aoyun.html#num=3
num后面的数字是调用的排名数,比如num=5的话就是调用排名前5的国家,如果是num=6的话就是调用排名前6的国家

演示:
<iframe frameborder="0" scrolling="no" src="http://promote.kaiyuan.eu/aoyun.html" width="230" height="80"></iframe>

<iframe frameborder="0" scrolling="no" src="http://promote.kaiyuan.eu/aoyun.html#num=5" width="230" height="120"></iframe>

<iframe frameborder="0" scrolling="no" src="http://promote.kaiyuan.eu/aoyun.html#num=6" width="230" height="145"></iframe>

还可以用JS 直接调用,limit=后面的数字就是调用的前几名国家数

代码:

<style>
*{ font-size:12px; }
.tb_01 img { vertical-align:-3px; margin-right:6px; }
.tb_01 th, .tb_01 .fblue { color:#39b9e6; }
.tb_01 td { background:#fff; height:21px; line-height:21px; text-align:center; color:#999 }
.tb_01 tr.bg td { background:#f7fbfd; }
.tb_01 td.tal { text-align:left; padding-left:12px;}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.min.js"></script>
<div id="metalTbody"></div>
<script type="text/javascript">
    var DATA_API = 'http://match.2012.sina.com.cn/api/Gl/medalsOrganization?app_key=fb647ad03c03ab15e9cb9bed461cbe7d&limit=3';
    jQuery.ajax(DATA_API, {
        async: true,
        dataType: 'jsonp',
        scriptCharset: 'utf-8',
        success: function (data) {
          var rt = data.result.data.medalLines;
          var tpl = '\
            <table width="100%" cellspacing="0" cellpadding="0" border="0" class="tb_01">\
              <thead>\
                <tr>\
                  <th scope="col" class="th1">名次</th>\
                  <th scope="col" class="th2">国家/地区</th>\
                  <th scope="col" class="th3">金</th>\
                  <th scope="col" class="th4">银</th>\
                  <th scope="col" class="th5">铜</th>\
                </tr>\
              </thead>\
              <tbody>';
          var nu = 0;
          for (var i in rt) {
            ++nu;
            var bg = '';
            if (nu%2 == 0) {
              bg = ' class="bg"';
            }
            tpl += '\
            <tr'+bg+'>\
              <td><span class="fblue">'+nu+'</span></td>\
              <td class="tal"><img src="'+rt[i].OrgFlag+'"> '+rt[i].OrgTrans+rt[i].Organisation+'</td>\
              <td>'+rt[i].TOT_Gold+'</td>\
              <td>'+rt[i].TOT_Silver+'</td>\
              <td>'+rt[i].TOT_Bronze+'</td>\
            </tr>';
          }
          tpl += '\
        </tbody>\
      </table>';
          $("#metalTbody").html(tpl);
        }
    });
</script>