php - 根据下拉选择更改表中的内容

Question

我想在用户从下拉列表中选择值后更改表中的内容。有两个下拉菜单 - 第一个用于选择用户，第二个用于选择脚本。我希望当用户选择用户时，表格将仅显示包含所选用户的行，并且脚本也相同。这是我的下拉菜单:

     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 的解决方案会很棒++...谢谢

Answer 1

下面的 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{
 
	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>