Question

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

我有一个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>

非常感谢任何帮助！

Answer 1

在您的情况下，您需要两个页面用于显示选择表单，另一个只是将请求后传递的数据返回给它，并且每次更改选择框时在第一页上返回一个ajax发布请求到第二页并获取json数组并使用jquery

显示它

http://www.infotuts.com/fetch-record-from-database-using-jquery-and-php/

http://openenergymonitor.org/emon/node/107

http://www.codexworld.com/load-more-data-using-jquery-ajax-php-from-database/

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

1 个答案: