配列の数でhtmlのtableを動的に作る - jQuery

趣味でウェブサービス(http://wesound.love/)を一本作ったんですけど、そのときに工夫したところを備忘録として書いておこうと思います。下記のように、wesoundでは、テーブルを作っています。例えば、そのテーブルに３枚ずつ音楽再生画面を並べて、その下に一枚だけ音楽再生画面を並べるというようなことを、配列の数を使って動的に制御したいと思いました。え？どうやんの？って最初なったわけです。細かいことはこの際省きますが、コードを利用すれば同じことができるようにしました。下記、コピペで動きます

1 実装
2 ついでにjsfiddleも
3 実行画面

実装

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>we sound</title>
</head>

  <body>

    <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous">
    </script>

    <table id="game_table" border="1">
      
    </table>

    <script type="text/javascript">

    /*
    *
    *変数定義
    *
    *
    */
    //音声ファイルの数を入れる配列
    var all_data_count_arr = [];
    var all_data_count_arr = ['', '', '','',''];

    //ユーザーネームを数を入れる配列
    var user_name_array = [];
    var user_name_array = ['taro', 'kawa', 'nina','jon', 'rock'];


    //primaryきーを入れる配列
    var primary_id = [];
    var primary_id = ['0', '1', '2','3', '4'];

    //画像ファイルの数を入れる配列
    var image_url = [];
    var image_url = ['https://www.gstatic.com/webp/gallery3/1.png', 
                    'https://www.gstatic.com/webp/gallery3/2.png', 
                    'https://www.gstatic.com/webp/gallery3/3.png',
                    'https://www.gstatic.com/webp/gallery3/4.png',
                    'https://www.gstatic.com/webp/gallery3/5.png'];

    //曲名を入れる配列
    var sound_genre = [];
    var sound_genre = ['God Plan', 'Helplessly', 'love your self','good day','guts'];

    var sound_url = [];
    var sound_url  = ['曲のURL', '曲のURL', '曲のURL','曲のURL','曲のURL'];

    //曲のジャンルを入れる配列
    var sound_title = [];
    var sound_title = ['曲のジャンル', '曲のジャンル', '曲のジャンル','曲のジャンル','曲のジャンル'];

    //音声カードを作るために回す全体のループの数
    var step;

    //外側のループの数
    var sotogawa_count = 0;

    //配列の数の分のループの回数
    var roop_count = 0;


    /*
    *
    *
    *外側のループ、何段、カードの段を作るか
    *
    */
    for (i = 0; i <= all_data_count_arr.length; i++)
      {
              //3の倍数の場合
              if( ( i % 3 ) == 0 && i != 0) {
              console.log(`3の倍数$`)
              sotogawa_count++
              }else{
              console.log(`3の倍数ではないです${i}`)
              }
      }

    /*
    *
    *
    *内側のループ、本体のループ
    *
    */
    console.log("サウンドタイトル");
    console.log(sound_title);

    for (step = 0; step <= sotogawa_count; step++)
    {

      var tr = $("<tr></tr>")
      var ii;
      //何個目で下の段に移るか
      for (ii = 0; ii < 4; ii++)
      {

                    if(all_data_count_arr.length == 0)
                    {
                      console.log("もうここでループを止めたい");
                      console.log(step);
                      console.log(all_data_count_arr.length);
                      break;
                    }
                    all_data_count_arr.length--


          tr.append(`

          <th style="
          color:blue;
          height:
          500px;
          width:
          500px;
          ">

              <div class='player' id='a'>

                          <div class='album-cover'>
                              <img src='${image_url[roop_count]}' style="height:200px; width:200px;" />
                          </div>

                      <!--    <div class='song-progress-bar'>
                              <div class='inner-bar'></div>
                          </div>
                       -->
                          <div class='song-info'>
                              <h1 class='song-title'>${sound_title[roop_count]}</h1>
                              <div class='song-band-wrapper'>
                                  <p class='song-band'><span class='album'>"${user_name_array[roop_count]}"</span></p>
                              </div>
                          </div>

                          <div class='player-buttons'>

                              <div class='playerbtn song-back'>
                                  <i class="fa fa-backward" aria-hidden="true" id="b"></i>
                              </div>

                              <div class='playerbtn playToggle'>
                                  <i class="fa fa-play" aria-hidden="true" id="${sound_url[roop_count]}"></i>
                              </div>

                              <div class='playerbtn song-forward'>
                                  <i class="fa fa-forward" aria-hidden="true" id="d"></i>
                              </div>

                          </div>
                      </div>
              </th>

          `)
          console.log(roop_count++);

      }
      $('#game_table').append(tr)

    }

    </script>

  </body>

</html>

ついでにjsfiddleも

jsfiddle

実行画面

下記は、簡単に説明すると、五つの数の値を持つ配列を作り、四つ横に並んだら一段下がってまた追加をするようにしています

Pocket

Share on Tumblr