У меня есть небольшой проект, с которым мне нужна помощь!
У меня есть база данных MYSQL, содержащая: «ID» «FoodTitle» «Serving» «Carbs» «Protein» «Fat»
Теперь у меня есть столбец «FoodTitle» в раскрывающемся меню. Поэтому всякий раз, когда пользователь выбирает, какую еду он хочет, столбец «Подача», «Углеводы», «Белки», «Жиры» в этой конкретной строке отображается в соответствующем текстовом вводе внутри таблицы html.
Я хотел бы, чтобы пользователь мог продолжать выбирать «FoodTitle», чтобы они могли продолжать добавлять строки/контент в таблицу html. Почти как они создают рецепт.
Я просто не могу найти способ позволить пользователю продолжать добавлять содержимое в таблицу html, например список.
Вот мой код...
<?php
// create a connection
$conn = mysqli_connect("localhost", "root", "root", "DBPT_MP_breakfast");
// check connection
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
?>
<html>
<head>
<style>
th, td {border:1px solid black;}
</style>
<meta charset="utf-8">
<title>DBPT Food Database</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<section>
<div class="form-fields">
<?php
$breakfast = 'SELECT * FROM breakfast';
$breakfastDisplay = mysqli_query($conn, $breakfast);
echo '<form action="" method="post">';
echo '<select class="meal-planner-selector" name="searchFood">';
echo '<option>Select a food:</option>';
while($bDis=mysqli_fetch_array($breakfastDisplay)){
echo '<option value="' . $bDis['ID'] . '">' . $bDis['FoodTitle'] . '</option>';
}
echo '</select>'; // Closing of list box
echo '<input type="submit" value="Add Food">';
echo '</form>';
//SEARCH FOOD DATABASE
if (!empty($_REQUEST['searchFood'])) {
$Search = mysqli_real_escape_string($conn, $_REQUEST['searchFood']);
$sql = "SELECT * FROM breakfast WHERE ID LIKE '%".$Search."%'";
$r_query = mysqli_query($conn, $sql);
$r = '';
$r .= '<table id="foodTable">';
while ($row = mysqli_fetch_array($r_query)){
$r .= '<tbody id="test">';
//HEADINGS
$r .= '<tr id="table-headings">';
$r .= '<th>'. 'Food Title' . '</th>';
$r .= '<th>'. 'Serving' . '</th>';
$r .= '<th>'. 'Carbs' . '</th>';
$r .= '<th>'. 'Protein' . '</th>';
$r .= '<th>'. 'Fat' . '</th>';
$r .= '</tr>';
//DATA
$r .= '<tr id="table-data">';
$r .= '<td>' .$row['FoodTitle'] . '</td>';
$r .= '<td><input type="text" value=" '.$row['Serving'] . '"</td>';
$r .= '<td><input type="text" value=" '.$row['Protein'] . '"</td>';
$r .= '<td><input type="text" value=" '.$row['Carbs'] . '"</td>';
$r .= '<td><input type="text" value=" '.$row['Fat'] . '"</td>';
$r .= '<td><input type="button" onclick="addRow()" id="add-row" value="Add Row"</td>';
$r .= '</tr>';
}
$r .= '</tbody>';
$r .= '</table>';
echo $r;
}
?>
<script>
function addRow() {
var row = document.createElement('tr'); // create row node
var col1 = document.createElement('td'); // create 1st column node
var col2 = document.createElement('td'); // create 2nd column node
var col3 = document.createElement('td'); // create 3rd column node
var col4 = document.createElement('td'); // create 4th column node
var col5 = document.createElement('td'); // create 5th column node
var col6 = document.createElement('td'); // create 6th column node
row.appendChild(col1); // append 1st column to row
row.appendChild(col2); // append 2nd column to row
row.appendChild(col3); // append 3rd column to row
row.appendChild(col4); // append 4th column to row
row.appendChild(col5); // append 5th column to row
row.appendChild(col6); // append 6th column to row
col1.innerHTML = "<? echo $row['FoodTitle'] ?>"; // put data in 1st column
col2.innerHTML = "<input type='text' value='<? echo $row['Serving']?>'/>"; // put data in 2nd column
col3.innerHTML = "<input type='text' value='<? echo $row['Carbs']?>'/>"; // put data in 3rd column
col4.innerHTML = "<input type='text' value='<? echo $row['Protein']?>'/>"; // put data in 4th column
col5.innerHTML = "<input type='text' value='<? echo $row['Fat']?>'/>"; // put data in 5th column
col6.innerHTML = "<input type='button' onclick='addRow()' id='add-row' value='Add Row'/>"; // put data in 6th column
var table = document.getElementById("foodTable"); // find table to append to
table.appendChild(row); // append row to table
}
</script>
</div>
</section>
<?php
$conn->close();
?>
</body>
</html>
Любая помощь будет принята с благодарностью!
