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
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.