根据下拉选择

我想从下拉列表中用户选择值后更改内容表中的改变表的内容。有两个下拉菜单 - 一个用于选择用户，另一个用于选择脚本。我希望当用户选择一个用户时，表格将只显示具有所选用户的行和脚本相同的行。这是我的下拉：根据下拉选择

 include_once "dbConnect.php"; 
    $query = "SELECT user_id FROM users"; 
    $result = mysql_query($query); ?> 
    <select name="select1"> 
    <?php while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) { ?> 
    <option value="<?php echo $line['user_id'];?>"> 
    <?php echo $line['user_id'];?> 
    </option> 
    <?php } ?> 
    </select> 

    <?php 
    include_once "dbConnect.php"; 
    $query = "SELECT script_name FROM scripts"; 
    $result = mysql_query($query); ?> 
    <select name="select1"> 
    <?php while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) { ?> 
    <option value="<?php echo $line['script_name'];?>"> 
    <?php echo $line['script_name'];?> 
    </option> 
    <?php } ?> 
    </select>

多数民众赞成在表中的数据：

$json_response = array(); 

$results= mysql_query("select user_id,script_name,cron_format from users,scripts"); 
while ($row = mysql_fetch_array($results, MYSQL_ASSOC)) { 
    array_push($json_response,$row); 
} 
echo json_encode($json_response);

，这是表：

<table class="table table-bordered table-hover"> 
     <thead> 
      <td>user name</td> 
      <td>script name</td> 
      <td>cron format</td> 
      <td>schedule last update</td> 
      <td>next execution time</td> 
      <td>script exec</td> 
     </thead> 
     <tbody> 
      <tr ng-repeat="x in data"> 
       <td>{{x.user_id}}</td> 
       <td>{{x.script_name}}</td> 
       <td><span class="editme" contenteditable="true">{{x.cron_format}}</span></td> 
       <td>{{x.schedule_last_update}}</td> 
       <td>{{x.next_execution_time}}</td> 
       <td>{{x.script_exec}}</td> 
      </tr> 
     </tbody> 
    </table>

开头表显示所有用户和每个用户所有脚本。任何解决方案是伟大的，但angularJs一个将是伟大的++ ...谢谢

来源

2015-02-08 Al.s

我们可以看到选择框所得到的'html'？ – DelightedD0D 2015-02-08 12:26:37

它的代码 – 2015-02-08 12:32:14

第一和平之间不，我的意思是由PHP – DelightedD0D 2015-02-08 12:33:22

以下jQuery解决方案应该为你工作。只需将class='filterElements'指定给您希望能够过滤表格的任何选择元素。元素上的data-cell-to-filter="c0"属性将确定元素将过滤哪个单元格。

$(function() { 
 
    $('#table').filterRowsByValue($('.filterElements')); 
 
    // $('.filterElements').change(); // uncomment to start with blank table 
 
}); 
 

 

 
jQuery.fn.filterRowsByValue = function(masterSelects) { 
 
    return this.each(function() { 
 
    var table = this; 
 
    var rows = []; 
 
    $(table).find('tr').each(function() { 
 
     var cells={}; 
 
     $(this).find('td').each (function(i, e) { 
 
      cells['c'+i] = $(this).html(); 
 
     });  
 
     rows.push(cells); 
 
    }); 
 
    $(table).data('tr', rows); 
 
    
 
    masterSelects.bind('change', function() { 
 
     var cur=this; 
 
     masterSelects.each(function(i,e){ 
 
     if(e != cur){ 
 
      $(e).val("0"); 
 
     } 
 
     }); 
 
     var rows = $(table).empty().scrollTop(0).data('tr'); 
 
     
 
     var search = '^'+$.trim($(this).val())+'$'; 
 
     var regex = new RegExp(search,'gi'); 
 
     var cel = $(this).data("cell-to-filter"); 
 
     $.each(rows, function(i,e) { 
 
     var row = rows[i]; 
 
     if(row[cel].match(regex) !== null) { 
 
      var cellArr=[]; 
 
      for (var curCell in row) { 
 
       if(row.hasOwnProperty(cel)){ 
 
       cellArr.push('<td>'+row[curCell]+'</td>'); 
 
       } 
 
      } 
 
     $(table).append('<tr>'+cellArr.join('')+'</tr>'); 
 
     } 
 
     }); 
 
    }); 
 
    
 
    }); 
 
};

.table-bordered, .table-bordered td{ 
 
    
 
\t border: thin solid #575656; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="selection"> 
 
<select name='user' class='filterElements' data-cell-to-filter="c0"> 
 
<option value = '0'>(Select user)</option> 
 
<option value = '1'>1</option> 
 
<option value = '2'>2</option> 
 
<option value = '3'>3</option> 
 
<option value = '4'>4</option> 
 
<option value = '5'>5</option> 
 
</select> 
 

 
<select name='scripts' class='filterElements' data-cell-to-filter="c1"> 
 
<option value = '0'>(Select script)</option> 
 
<option value='script_one'>script_one</option> 
 
<option value='script_two'>script_two</option> 
 
<option value='script_three'>script_three</option> 
 
<option value='script_four'>script_foure</option> 
 
<option value='script_five'>script_five</option> 
 
</select> 
 
</div> 
 

 

 
<table class="table table-bordered table-hover"> 
 
    <thead> 
 
    <td>user name</td> 
 
    <td>script name</td> 
 
    <td>cron format</td> 
 
    <td>schedule last update</td> 
 
    <td>next execution time</td> 
 
    <td>script exec</td> 
 
     </thead> 
 
    <tbody id="table" > 
 
    <tr ng-repeat="x in data"> 
 
     <td>1</td> 
 
     <td>script_five</td> 
 
     <td><span class="editme"three lass="editme" contenteditable="true">Some stuff</span></td> 
 
     <td>7/11/14</td> 
 
     <td>15:00</td> 
 
     <td>Some stuff</td> 
 
    </tr> 
 
    <tr ng-repeat="x in data"> 
 
     <td>1</td> 
 
     <td>script_three</td> 
 
     <td><span class="editme" contenteditable="true">Some stuff</span></td> 
 
     <td>7/11/14</td> 
 
     <td>15:00</td> 
 
     <td>Some stuff</td> 
 
    </tr> 
 
    <tr ng-repeat="x in data"> 
 
     <td>2</td> 
 
     <td>script_one</td> 
 
     <td><span class="editme" contenteditable="true">Some stuff</span></td> 
 
     <td>7/11/14</td> 
 
     <td>15:00</td> 
 
     <td>Some stuff</td> 
 
    </tr> 
 
    <tr ng-repeat="x in data"> 
 
     <td>3</td> 
 
     <td>script_five</td> 
 
     <td><span class="editme" contenteditable="true">Some stuff</span></td> 
 
     <td>7/11/14</td> 
 
     <td>15:00</td> 
 
     <td>Some stuff</td> 
 
    </tr> 
 
    <tr ng-repeat="x in data"> 
 
     <td>1</td> 
 
     <td>script_two</td> 
 
     <td><span class="editme" contenteditable="true">Some stuff</span></td> 
 
     <td>7/11/14</td> 
 
     <td>15:00</td> 
 
     <td>Some stuff</td> 
 
    </tr> 
 
    <tr ng-repeat="x in data"> 
 
     <td>2</td> 
 
     <td>script_two</td> 
 
     <td><span class="editme" contenteditable="true">Some stuff</span></td> 
 
     <td>7/11/14</td> 
 
     <td>15:00</td> 
 
     <td>Some stuff</td> 
 
    </tr> 
 
    <tr ng-repeat="x in data"> 
 
     <td>5</td> 
 
     <td>script_five</td> 
 
     <td><span class="editme" contenteditable="true">Some stuff</span></td> 
 
     <td>7/11/14</td> 
 
     <td>15:00</td> 
 
     <td>Some stuff</td> 
 
    </tr> 
 
    <tr ng-repeat="x in data"> 
 
     <td>5</td> 
 
     <td>script_one</td> 
 
     <td><span class="editme" contenteditable="true">Some stuff</span></td> 
 
     <td>7/11/14</td> 
 
     <td>15:00</td> 
 
     <td>Some stuff</td> 
 
    </tr> 
 
    <tr ng-repeat="x in data"> 
 
     <td>4</td> 
 
     <td>script_five</td> 
 
     <td><span class="editme" contenteditable="true">Some stuff</span></td> 
 
     <td>7/11/14</td> 
 
     <td>15:00</td> 
 
     <td>Some stuff</td> 
 
    </tr> 
 
    <tr ng-repeat="x in data"> 
 
     <td>1</td> 
 
     <td>script_four</td> 
 
     <td><span class="editme" contenteditable="true">Some stuff</span></td> 
 
     <td>7/11/14</td> 
 
     <td>15:00</td> 
 
     <td>Some stuff</td> 
 
    </tr> 
 
    
 
    </tbody> 
 
</table>

来源

2015-02-08 14:09:11 DelightedD0D

任何选项添加分页？ – user7441072 2017-04-25 08:07:02

@ user7441072当然，你可以计算过滤行的数量，并将它们全部隐藏在一组数字上（比如说50），然后提供按钮在数据集中向前和向后移动。也就是说，如果你需要过滤和分页，我只需要使用[datatables]（https://datatables.net/） – DelightedD0D 2017-04-25 11:17:04

根据下拉选择

回答

相关问题