JavaScriptでテーブルを・・・ #JavaScript

JavaScriptでJSONから動的に生成したテーブルをモーダルウインドウに表示します。モーダルウインドウにランキング等を表示したい場合などに使ってください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>サンプル</title>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

  <style>
  /* モーダルのデザイン */
  *{
    margin:0px;
    padding:0px;
  }

  #modal-content{
    display: none;
    width:50%;
    height: 80%;
    padding:20px 40px 40px 30px;
    border:2px solid #aaa;
    background:#fff;
    z-index:2;
    position:fixed;
  }

  #modal-overlay{
    z-index:1;
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:120%;
    background-color:rgba(0,0,0,0.75);
  }

  #modal-close{
    float: right;
    background: #fff;
    color: #C0C0C0;
    width: 20px;
    height:20px;
    border-radius: 50%;
    cursor:default;
  }

  #modal-body{
    border: 1px solid gray;
    margin:3% 0%;
    height: 85%;
    overflow-y:scroll;
    overflow:auto;
  }

  #modal-footer{
    text-align: right;
  }

  /* ここより下は、モーダル内のテーブルデザイン */
  th{
    /* ヘッダ背景塗りつぶし */
    background: #eee;
  }
  th,td {
    /* 枠線を1本線指定 */
    border: solid 1px;
    width:auto;
  }

  table{
    /* 枠線を1本線指定 */
    border: solid 1px;
    border-collapse:  collapse;
    white-space: nowrap;/*横スクロールに対してセルの幅を一定に保つ */
  }
</style>
</head>

<body>
  <p><a id="modal-open" class="button-link">モーダルウィンドウを開きます。</a></p>

  <!--モーダル画面-->
  <div id="modal-content">

    <p id="modal-close">×</p>
    <p><span id="modal-title" >ランキング</span></p>

    <!--ボディー-->
    <div id="modal-body">
      <!--テーブル生成位置-->
      <span id ='maintable'></span>
    </div>

    <!--フッター-->
    <div id="modal-footer">
      <!--ページングボタン設置-->
      <button id="prevbtn" type="button">＜</button>
      <span id="currentpage">currentpage</span>
      <span>/</span>
      <span id="lastpage">lastpage</span>
      <button id="nextbtn" type="button">＞</button>
    </div>
  </div>

  <script>
  jQuery(function($) {
    var displayrows = 3;// １ページ当たり表示する行の数
    var page = 0;

    $("#modal-open").click(function(){
      paging(page,displayrows);

      //新しくモーダルウィンドウを起動しない
      if($("#modal-overlay")[0]) return false ;

      //オーバーレイ用のHTMLコードを、[body]内の最後に生成する
      $("body").append('<div id="modal-overlay"></div>');

      //[$modal-overlay]をフェードインさせる
      $("#modal-overlay").fadeIn("fast");

      //[$modal-content]をフェードインさせる
      $("#modal-content").fadeIn("fast");

    });//イベントハンドラ（モーダルウインドウ開く）の終止

    // ページ進む
    $('#nextbtn').click(function() {
      if (page < json.length /displayrows - 1 ) {// １ページ前進
        page++;
        paging(page,displayrows)
      }
    });

    // ページ戻る
    $('#prevbtn').click(function() {// １ページ後進
      if (page > 0 ) {// １ページ前進
        page--;
        paging(page,displayrows)
      }
    });

    //イベントハンドラ（モーダルウインドウ閉じる）
    $("#modal-overlay,#modal-close").click(function(){
      //[#modal-overlay]と[#modal-close]をフェードアウトする
      $("#modal-content,#modal-overlay").fadeOut("slow",function(){
        //フェードアウト後、[#modal-overlay]をHTML(DOM)上から削除
        //生成したtableを含むtable内の要素をすべて削除
        $("#modal-overlay").remove();
      });
      $("#maintable>table").remove();
    });


    function paging(page,displayrows) {
      $('#maintable table').remove();

      let contant = '<table>';

      // ヘッダ行を作成
      contant += '<tr>';

      for (key in json[0]) {
        // th要素を生成
        contant += '<th>'+ key + '</th>';
      }
      contant += '</tr>';

      //次ページ最終行の判定
      if ((page+1)*displayrows < json.length) {
        lastrows = (page+1)*displayrows;
      }else{
        lastrows = json.length;
      }

      // データ行を作成
      for (var i = page*displayrows; i < lastrows; i++)  {

        contant += '<tr>';
        for (key in json[0]) {
          // td要素を生成
          contant += '<td>'+ json[i][key] +'</td>';
        }
        contant += '</tr>';

      }
      contant += '</table>';

      maintable.innerHTML = contant;

      $('#lastpage').html(Math.ceil(json.length/displayrows));
      $('#currentpage').html(page + 1);
    };
  });//jQuery(function($)の終止
</script>

<script>
var json =[ //jsonサンプルデータ
  {
    "順位":1 ,"氏名":"王貞治" , "本数":868
  }
  ,
  {
    "順位":2 ,"氏名":"野村克也" ,"本数":657
  }
  ,
  {
    "順位":3 ,"氏名":"門田博光" ,"本数":567
  }
  ,
  {
    "順位":4 ,"氏名":"山本浩二" ,"本数":536
  }
  ,
  {
    "順位":5 ,"氏名":"清原和博" ,"本数":525
  }
]
</script>
</body>
</html>
実行結果