2017-08-15 2 views
1

Ich habe eine dynamische Tabelle in einer Form, in der je nach Benutzer Eingabezeilen zur Tabelle hinzugefügt werden. Tabellenspalte hat ID, Name, Spieltypen (Dynamische Liste aus der DB-Tabelle).Wie fügt man jeder Zeile einer HTML-Tabelle in Jquery eine dynamische Liste hinzu?

Nun, wenn der Benutzer eine beliebige Anzahl in Anzahl der Studenten Feld eingibt und klicken Sie auf laden Spiele-Taste, erwarte ich, dass Tabelle, die viele Zeilen erweitern sollte, so dass Benutzer die Daten in Felder einfügen können.

Es funktioniert auch, aber das Problem ist das dritte Feld der Tabelle enthält eine Liste. und ich kann nicht verstehen, wie man die Liste für das Spielfeld in jeder Zeile der Tabelle auffüllt.

-Code

   <?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

Es tut mir leid, ich bin neu im Forum .... kann mir jemand helfen zu verstehen, warum die Frage abgelehnt wird, damit ich die Korrekturen machen oder besser erklären kann. – binee

+0

Hallo, willkommen in SO. Ihre Frage wurde wahrscheinlich abgelehnt, weil unklar ist "Ich möchte, dass die Liste zu jeder Zeile hinzugefügt wird" ist schwer zu verstehen. Ich würde untersuchen, [wie man ein minimales, überprüfbares Beispiel erstellt] (https://stackoverflow.com/help/mcve) - nur eine einfache Tabelle und die Manipulation, die Sie daran ausführen möchten, möglicherweise unabhängig vom Code in Ihr aktuelles Projekt. Viel Glück! – theFunkyEngineer

+0

@theFunkyEngineer, Danke für die Erwähnung, dass ... Ich habe die Frage aktualisiert. – binee

Antwort

0

ich das gleiche mit folgenden jQuery-Code erreichen könnte:

$(".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); 
     } 
}); 
Verwandte Themen