2017-08-15 10 views
1

私はフォームに動的テーブルを持っています。ユーザーに応じて、入力行がテーブルに追加されます。テーブルの列には、ID、名前、ゲームの種類(DB​​テーブルから取得された動的リスト)があります。ユーザーは、学生のフィールドの号に任意の番号を入力し、ロードゲームボタンをクリックするとJqueryのHTMLテーブルの各行に動的リストを追加するには?

は今、私は、ユーザーがフィールドにデータを挿入することができるように、そのテーブルには、多くの行に展開する必要があります期待しています。

でも問題はありませんが、テーブルの第3フィールドにはリストが含まれています。テーブルのすべての行でgame_idフィールドのリストを設定する方法を理解できません。

コード

   <?php 
       $db = new PDO("sqlite:c:/sqlite/games.db"); 
       $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
       $query_game = $db->prepare("select distinct games as di from outdoor_games;"); 
       $query_game->execute(); 
       $data = $query_game->fetchAll(); 

      ?> 
      <!DOCTYPE html> 
      <html> 
      <head> 
       <title>Access form</title> 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
       <script language="JavaScript"> </script> 
      </head> 
      <body> 
       <form action="<?php $_SERVER['PHP_SELF'];?>" method="post"> 
       <h2 style="text-align:center;">Test Form</h2> 

       <fieldset style="width: 1000px;"> 

          <legend><b> Source Profile</b></legend> 

          <TABLE id="STable" width="350px" border="1"> 
          <tr> 
           <th bgcolor="WHITESMOKE">Student_ide</th> 
           <th bgcolor="WHITESMOKE">Student_Name</th> 
           <th bgcolor="WHITESMOKE">Game Id </th> 
          </tr> 
          <TR> 
           <td><input type= "text" name= "Stu_Id[]" value=1 /> </td> 
           <td><input type= "text" name= "Stu_Name[]" /> </td> 
           <td><select name= "Game_id[]" /> 
             <option value=""><b>Games</b></option> 
              <?php foreach ($data as $row){echo '<option value="' . $row['di'] . '">' . $row ['di'] . '</option>';} ?> 
            </select> 
          </tr>  
          </td> 
          </TR></TABLE></br> 
          <label>No. of Students <input type= "text" id="s_cnt" name= "d_Count"></label> 
          <button type="button" class='loadgames' >Load Games</button> 
          <input type="submit" name ="add_SP" value ="Add Student Info" style="float: right;" /> </br> </br> 

       </fieldset ></br> </br> 
       <input type="submit" name ="exit" value ="EXIT" /> 

      </form> 
      <script> 

      $(".loadgames").on('click',function(){ 
         var num = $("#s_cnt").val(); 
         $("#STable tr").slice(2).remove(); 
         for (var i = 2; i <= num; i++) 
         { 
          var data = "<tr><td><input type='text' id='Stu_Id"+i+"' class='Stu_Id' name='Stu_Id[]' value = "+i+" /></td><td><input type='text' id='Stu_Name"+i+"' name='Stu_Name[]' /></td> <td><select name= 'Game_id[]' /><option value=""><b>Games</b></option>"+<?php foreach ($data as $row){echo '<option value="' . $row['di'] . '">' . $row ['di'] . '</option>';} ?>+"</select></tr>"; 
          $("#STable").append(data); 
         } 
       }); 

      </script> 
      </body> 
      </html> 
+0

を誰かが私を理解するのに役立つことができ、私は....フォーラムに新しいですなぜ質問が投票されたので、私は訂正をしたり、それをより良く説明することができます。 – binee

+0

こんにちは、ようこそ。あなたの質問は、「すべての行にリストを追加したい」ということがわかりにくいため、下落している可能性があります。私は[最小限の検証可能なサンプルを作成する方法](https://stackoverflow.com/help/mcve)を見てみましょう。単純なテーブルとその上で実行しようとしている操作です。あなたの実際のプロジェクトがんばろう! – theFunkyEngineer

+0

@theFunkyEngineer、そのことに言及してくれてありがとう...私は質問を更新しました。 – binee

答えて

0

私はjqueryのコードを次のように同じことを達成できる:私は申し訳ありません

$(".loadgames").on('click',function() 
    { 
     var num = $("#s_cnt").val(); 
     $("#STable tr").slice(2).remove(); 
     for (var i = 2; i <= num; i++) 
     { 
       var data = "<tr><td><input type='text' id='Stu_Id"+i+"' class='Stu_Id' name='Stu_Id[]' value = "+i+"></td><td><input type='text' id='Stu_Name"+i+"' name='Stu_Name[]'/></td><td><select name='Game_id[]'><option value='null'>Games</option><?php foreach ($data as $row){echo "<option value=".$row['di'] . ">" .$row['di']. "</option>";}?></select></td></tr>"; 
       $("#STable").append(data); 
     } 
}); 
関連する問題