Php 使用下拉菜单不断地将多个mysql数据库行添加到html表中_Php_Html_Mysql_Html Table_Dropdown

Php 使用下拉菜单不断地将多个mysql数据库行添加到html表中

php html mysql

Php 使用下拉菜单不断地将多个mysql数据库行添加到html表中,php,html,mysql,html-table,dropdown,Php,Html,Mysql,Html Table,Dropdown,我有一个小项目，我需要一些帮助我有一个MYSQL数据库，其中包含：“ID”“FoodTitle”“提供”“碳水化合物”“蛋白质”“脂肪” 现在，我在下拉菜单中有了“FoodTitle”列。因此，每当用户选择他们想要的食物时，该特定行中的“食用”、“碳水化合物”、“蛋白质”、“脂肪”列就会显示在html表中相应的文本输入中我希望用户能够继续选择“FoodTitle”，这样他们就可以继续向html表中添加行/内容。就像他们在创造一个食谱一样我只是找不到一种方法允许用户像列表一样不断地将内容添加

我有一个小项目，我需要一些帮助

我有一个MYSQL数据库，其中包含：“ID”“FoodTitle”“提供”“碳水化合物”“蛋白质”“脂肪”

现在，我在下拉菜单中有了“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>


th，td{边框：1px纯黑色；}
DBPT食品数据库
函数addRow（）{
var row=document.createElement（'tr'）；//创建行节点
var col1=document.createElement（'td'）；//创建第一列节点
var col2=document.createElement（'td'）；//创建第二列节点
var col3=document.createElement（'td'）；//创建第三列节点
var col4=document.createElement（'td'）；//创建第四列节点
var col5=document.createElement（'td'）；//创建第5列节点
var col6=document.createElement（'td'）；//创建第6列节点
row.appendChild（col1）；//将第一列追加到行
row.appendChild（col2）；//将第二列追加到行
row.appendChild（col3）；//将第三列追加到行
row.appendChild（col4）；//将第4列追加到行
row.appendChild（col5）；//将第5列追加到行
row.appendChild（col6）；//将第6列追加到行
col1.innerHTML=“；//将数据放入第1列
col2.innerHTML=“在本例中，您需要两页，一页用于显示select表单，另一页仅返回post请求时传递给它的数据，并且每次更改select框时，在第一页向第二页发出ajax post请求，获取json数组并使用jquery显示它


使用Jquery和AjaxHi会更容易，我是从ajax开始的。我成功了，在谷歌搜索之后，我也让Jquery部分添加了一行，但我想不出添加多个内容的方法。它只是不断替换原始行。-这有意义吗？我一定遗漏了什么！用l编辑你的问题你用jquery做的最后一件事，我可以帮助你，好吧，我添加了jquery部分，但我知道我做错了…我就是找不到如何准确地得到它我需要它！-我的头很痛！你的问题是，每次你更改选择框时，你都会刷新整个页面，这样页面上显示的旧记录就会消失，所以最好的方法是这里是使用ajax来获取数据而不刷新页面OK…谢谢你的帮助…我已经回到这里，我会看看我是否可以编辑它以匹配我需要它做的事情…因为这可能有点超出我的控制范围。你有任何可以提供的教程链接，可以帮助我解决这个问题吗？