Как добавить динамический список в каждую строку таблицы HTML в Jquery?

У меня есть динамическая таблица в форме, где в зависимости от пользователя входные строки будут добавлены в таблицу. Столбец таблицы имеет Id, Name, Types of games (Динамический список, извлекаемый из таблицы БД).

Теперь, когда пользователь вводит любое число в Поле «Студенты» и нажмите на Кнопка Загрузить игры, Я ожидаю, что таблица должна расшириться до такого количества строк, чтобы пользователь мог вставить данные в поля.

Это работает, но проблема в том, что третье поле таблицы содержит список. и я не могу понять, как заполнять список для поля 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>

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);
}
});
0

Другие решения

Других решений пока нет …

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector