如何在Jquery中向HTML表的每一行添加動態列表？

Question

我有一個動態表格形式，其中取決於用戶輸入行將被添加到表格中。 表列具有ID，名稱，游戲類型（從DB表獲取的動態列表）。

現在，當用戶在“學生人數” 字段中輸入任何數字並單擊“ 加載游戲”按鈕時 ，我希望該表應擴展到那么多行，以便用戶可以在字段中插入數據。

它也可以正常工作，但問題是該表的第三個字段包含一個列表。 而且我無法理解如何在表格的每一行中填充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>

Answer 1

我可以通過以下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);
        }
});

如何在Jquery中向HTML表的每一行添加動態列表？

問題描述

1 個解決方案

解決方案1
0 已采納 2017-08-16 10:54:32

如何在Jquery中向HTML表的每一行添加動態列表？

問題描述

1 個解決方案

解決方案1 0 已采納 2017-08-16 10:54:32

解決方案1
0 已采納 2017-08-16 10:54:32