Question

我在表单中有一个动态表，根据用户的不同，输入行将被添加到表中。表列具有Id，名称，游戏类型（从DB表中获取的动态列表）。

现在，当用户在 No中输入任意数字时。学生字段并单击加载游戏按钮，我希望该表应扩展到那么多行，以便用户可以在字段中插入数据。

它的工作原理但问题是表的第三个字段是否包含一个列表。我无法理解如何在表格的每一行填充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 个答案: