天梯榜:美洲

<html> <head> <script type=“text/javascript”>

      jQuery.noConflict();
jQuery(document).ready(function($) {
	htmlobj=$.ajax({url:"https://americas.api.riotgames.com/lor/ranked/v1/leaderboards?api_key=RGAPI-254d3556-b545-4986-a278-d4e284102c85",async:false});
	leaderboard = htmlobj.responseText;
	leaderboard2 = leaderboard.substring(12,leaderboard.length-1);
	leaderboard_json = JSON.parse(leaderboard2);
	var s = "";
	for(var i = 0; i < leaderboard_json.length; i++) {
  	s = "<tr><td>" + (leaderboard_json[i].rank+1) + "</td><td>" + leaderboard_json[i].lp + "</td><td>" +
          leaderboard_json[i].name + "</td></tr>";
  	$("#tab").append(s);
	}
});</script>

<style type=“text/css”> html, body {

  margin: 0;
  padding: 0;

} body {

  background: #fff;
  font: 14px/1.5 "微软雅黑";

} a {

  text-decoration: none;

} table {

  width: 90%;
  border: 1px solid #c3dcf5;
  margin: 10px auto;
  border-collapse: collapse;/*合并单边框*/

} thead th {

  background: #ebf5ff;
  text-align: center;
  color: #5591be;

} td {

  color: #263d63;
  border: 1px solid #c3dcf5;
  padding: 4px 14px;
  text-align: center;

} /*方法一*/ /*tr.odd td {

  background-color: #f7fbff;

}**增加背景色,使得应用该规则的行表现出隔行换色的效果*/ /*方法二*/ tr:nth-of-type(even) { background-color: #ebf5ff; }/*设置偶数行背景色*/ tr:nth-of-type(odd) { background-color: #f7fbff; }/*设置奇数行背景色*/ </style> </head> <body> <table border=“1px” id=“tab”> <tr> <td scope=“col”><strong>排名</strong></td> <td scope=“col”><strong>胜点</strong></td> <td scope=“col”><strong>玩家名称</strong></td> </tr> </table> </body> </html>