douzepao0281 2015-10-31 13:29
浏览 63

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

I have a small project that I need some help with!

I have a MYSQL database containing: 'ID' 'FoodTitle' 'Serving' 'Carbs' 'Protein' 'Fat'

Now, I have the 'FoodTitle' column in a dropdown menu. So whenever a user selects what food they want the 'Serving' 'Carbs' 'Protein' 'Fat' column in that praticular row displays in its appropriate text input inside a html table.

I would like the user to be able to keep selecting 'FoodTitle' so they can keep adding rows/content to the html table. Almost like they are creating a recipe.

I just can't find a way to allow the user to keep adding the content to the html table like a list.

Here is my code...

<?php
// create a connection
$conn = mysqli_connect("localhost", "root", "root", "DBPT_MP_breakfast");
// check connection
if (mysqli_connect_errno()) {
    printf("Connect failed: %s
", 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>

Any help would be greatly appreciated!

  • 写回答

1条回答 默认 最新

报告相同问题?

悬赏问题

  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?
  • ¥15 Arcgis相交分析无法绘制一个或多个图形
  • ¥15 关于#r语言#的问题:差异分析前数据准备,报错Error in data[, sampleName1] : subscript out of bounds请问怎么解决呀以下是全部代码:
  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)