php - How to add dynamic list to each row of a HTML table in Jquery? -
i have dynamic table in form, depending on user input rows added table. table column have id, name, types of games(dynamic list fetched db table).
now when user enters number in no. of students field , click on load games button, expecting table should expand many rows user can insert data in fields.
its working problem third field of table containing list. , unable understand how populate list game_id field in every row of table.
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 di 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 $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(); (var = 2; <= 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 $row){echo '<option value="' . $row['di'] . '">' . $row ['di'] . '</option>';} ?>+"</select></tr>"; $("#stable").append(data); } }); </script> </body> </html>
i achieve same following jquery code :
$(".loadgames").on('click',function() { var num = $("#s_cnt").val(); $("#stable tr").slice(2).remove(); (var = 2; <= 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 $row){echo "<option value=".$row['di'] . ">" .$row['di']. "</option>";}?></select></td></tr>"; $("#stable").append(data); } });
Comments
Post a Comment