从下拉列表的选定值创建表列标题

时间:2017-07-31 11:58:21

标签: javascript php jquery twitter-bootstrap

我正在使用多个选择下拉列表中的example

的index.php

<!DOCTYPE html>
<html>
 <head>
  <title>Webslesson Tutorial | How to Use Bootstrap Select Plugin with PHP JQuery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>

 </head>
 <body>
  <br /><br />
  <div class="container">
   <br />
   <h2 align="center">How to Use Bootstrap Select Plugin with PHP JQuery</h2>
   <br />
   <div class="col-md-4" style="margin-left:200px;">
    <form method="post" id="multiple_select_form">
     <select name="framework" id="framework" class="form-control selectpicker" data-live-search="true" multiple>
      <option value="Laravel">Laravel</option>
      <option value="Symfony">Symfony</option>
      <option value="Codeigniter">Codeigniter</option>
      <option value="CakePHP">CakePHP</option>
      <option value="Zend">Zend</option>
      <option value="Yii">Yii</option>
      <option value="Slim">Slim</option>
     </select>
     <br /><br />
     <input type="hidden" name="hidden_framework" id="hidden_framework" />
     <input type="submit" name="submit" class="btn btn-info" value="Submit" />
    </form>
    <br />

   </div>
  </div>
 </body>
</html>

<script>
$(document).ready(function(){
 $('.selectpicker').selectpicker();

 $('#framework').change(function(){
  $('#hidden_framework').val($('#framework').val());
 });

 $('#multiple_select_form').on('submit', function(event){
  event.preventDefault();
  if($('#framework').val() != '')
  {
   var form_data = $(this).serialize();
   $.ajax({
    url:"insert.php",
    method:"POST",
    data:form_data,
    success:function(data)
    {
     //console.log(data);
     $('#hidden_framework').val('');
     $('.selectpicker').selectpicker('val', '');
     alert(data);
    }
   })
  }
  else
  {
   alert("Please select framework");
   return false;
  }
 });
});
</script>

它工作正常但我正在尝试根据我的需要调整页面上提到的代码。我想创建一个动态表,其列名是我从下拉列表中选择的名称

所以不要手动创建表格,而是将列名称作为我的代码

<?php   

ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);


    $ser="10.90.294.23";
    $db="Framework"; 
    $user="test"; 
    $pass="test0";
    $query = 'SELECT Laravel, Symfony, Codeigniter, CakePHP FROM Framework.list';

    $dbDB = new PDO("odbc:Driver=ODBC Driver 13 for SQL Server;Server=10.90.294.23,1456;Database=Framework;Port=1456", $user, $pass);

     ?>  
     <!DOCTYPE html>  
     <html>  
          <head>  
               <title>HTML table using Jquery with PHP</title>  
               <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
               <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
               <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
          </head>  
          <body>  
               <br />  
               <div class="container" style="width:700px;">  
                    <h3 class="text-center">HTML table using Jquery with PHP</h3><br />  
                    <div class="table-responsive" id="employee_table">  
                         <table class="table table-bordered">  
                              <tr>  
                                   <th width="10%">Laravel</th>  
                                   <th width="30%">Symfony</th>  
                                   <th width="10%">Codeigniter</th>  
                                   <th width="50%">CakePHP</th>  
                              </tr>  
                            <?php   
    foreach ($dbDB->query($query) as $row) {
                              ?>  
                              <tr>  
                                   <td><?php echo $row['Laravel']; ?></td>  
                                   <td><?php echo $row['Symfony']; ?></td>  
                                   <td><?php echo $row['Codeigniter']; ?></td>  
                                   <td><?php echo $row['CakePHP']; ?></td>  
                              </tr>  
                              <?php                           
                              }  
                              ?>  
                         </table>  
                    </div>   
               </div>  
               <br />  
          </body>  
     </html>  

我希望列标题将从所选值自动创建。 我正在考虑将所选值存储在变量中,例如:Laravel,CakePHP,Yii,Slim然后我根据逗号“,”之间的每个文本创建标题

有人可以帮忙吗?我尝试了很多方法,但仍然无法使其发挥作用。谢谢。

1 个答案:

答案 0 :(得分:1)

如果这与示例相同,那么我认为您的表将有一行并以逗号分隔。这真的不是最好的方式,但对于你需要做的例子。

     $row = $dbDB->query($query);
         $rows = explode(",",$row);
        ?>
          <tr>  
    <?php
         foreach ($rows as $r ) {
                          ?>  

                               <td><?php echo $r; ?></td>  

                          <?php                           
                          }  
?>
        </tr>