Filter a SharePoint(table) View based on click - Jquery
Question
I was hoping to get some help with some jQuery, and am interested in understanding the solution to the problem. Basically, I have a SharePoint list, which is holding two instances of the same table. The table in black is the same table below just modified, I want the user to be able to click on the season "SS17" or "FW17" and filter the below table by the item they click on.
Currently I used CSS to set the second table display: none; and here is the jQuery I use to toggle the table when clicked.
$(document).ready(function(){
$(".ms-vb2").click(function(){
$('#scriptWPQ5').slideToggle("slow");
}); });
Currently it is toggling the table fine, where ".ms-vb2" is the top table in black, and where '#scriptWPQ5' is the bottom table that is being toggled. I wanted to take it a step further and filter it based on what the "Season" the user clicked!
Thank you for your time, and I hope you can help me learn jQuery and understand tables :) Let me know if I need to add anymore information!
EDIT - Here is the HTML for the first table, the first row "SS17" is highlighted, and the other row "FW17" is outlined in red. Table 1 HTML
I do not have the ability to post more than 2 links, but will delete the first link if I need to, in order to post the HTML of the second table. The second table is identical to the Table 1 HTML though.
1 answers
solution1
0 ACCPTED 2015-10-27 21:09:59
Try this solution,
this allows you to click on TRs from table1, and trigger rows to hide and show in table2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.highlight{
background-color: yellow;
font-size:24px;
}
</style>
</head>
<body>
<table border="1" id="table1">
<tr>
<td>ss17</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>ss18</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>ss19</td>
<td>def</td>
<td>ghi</td>
</tr>
</table>
<br/>
<br/>
<br/>
<table border="1" id="table2">
<thead>
<tr>
<th>Season</th>
<th>Model</th>
<th>Model</th>
<th>Model</th>
<th>Model</th>
<th>Model</th>
<th>Model</th>
</tr>
</thead>
<tbody>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
</tbody>
</table>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$('#table2 tbody tr').hide();
$('#table1 tr').click(function () {
var trClickedValue = $(this).children('td:eq(0)').html();
$(this).attr('data',trClickedValue); // set ATTR
var dataValue = $(this).attr('data'); // get ATTR
$('#table2 tbody tr').each(function(){
var tr = $(this);
var tdValue = tr.children('td:eq(0)').html();
if(tdValue != dataValue)
{
tr.hide();
tr.removeClass('highlight');
}
else
{
tr.toggle();
tr.addClass('highlight');
}
})
})
</script>
</body>
</html>
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.
Related Question
Filter table data with Jquery based on HTML input
Using Jquery Filter Table with CSHTML View
how to filter data in a table on table row click using jquery
jQuery button to filter HTML table based on classes assigned to table rows
Filter list/view on click
Filter a table result using JQuery event click after press Enter
jQuery click filter lists
Click filter in table AngularJS
filter table based on date range selected via datepicker using jquery
Get table row value based on button click using Jquery/Javascript
Related Tags