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

Question

I want to change to content in a table after user selecting value from dropdown list. there are two dropdowns - one to select user and second to select script. i want that when user chooses a user the table will show only rows with the chosen user and same for script. this is my dropdown:

     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>

thats the data in the table:

$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);

and this is the table:

    <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>

at the beginning table shows all users and for each user all scripts. any solution is great but angularJs one will be great++...thanks

Answer 1

The below jQuery solution should work for you. Just give class='filterElements' to any select element that you want to be able to filter the table. The data-cell-to-filter="c0" property on the element will determine which cell the element will filter by.

 $(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>