Filtering tabular data with Jquery

Question

I need a little help to put me in the right direction. This is what I am trying to achieve.

I have a table of data e.g.

<table><thead>
<tr><th>Categories</th><th>Week 1</th><th>Week 2</th><th>Week 3</th></tr>
</thead>
<tbody>
<tr><td>Category 1</td>
    <td>Sam: 5 <br /> Roger 10</td>
    <td>Sam: 0 <br /> Roger 5</td>
    <td>Susan: 25 <br /> Aimee 15</td>
</tr>
<tr><td>Category 2</td>
    <td>Sam: 5 <br /> John: 15</td>
    <td>Sam: 0 <br /> Roger: 15</td>
    <td>Susan: 25 <br /> Aimee: 15</td>
</tr>
</tbody></table>

These are the users who have number assigned in the table above.

<ul>
<li><a href="#">John</a></li>
<li><a href="#">Roger</a></li>
<li><a href="#">Aimee</a></li>
<li><a href="#">Sam</a></li>
<li><a href="#">Susan</a></li>
</ul>

I was hoping to create a filter using JQuery so that if I wanted to see John only in the table above I would click against that name in the list above. I have complete control over the markup so I can wrap user names in the table with required classes (for selecting) or add any additional code etc.

How do I achieve that? I have limited experience using Jquery so any help would be appreciated. Thanks

Each cell has multiple values in there .. so if it was one column of one username per cell then yes that would make sense to use data table. — NoNice
– NoNice, Commented Jun 23, 2017 at 14:14

caramba · Accepted Answer · 2017-06-23 14:44:12Z

3

modified HTML:

<ul class="names">
<li><a href="#">John</a></li>
<li><a href="#">Roger</a></li>
<li><a href="#">Aimee</a></li>
<li><a href="#">Sam</a></li>
<li><a href="#">Susan</a></li>
</ul>

<table><thead>
<tr><th>Categories</th><th>Week 1</th><th>Week 2</th><th>Week 3</th></tr>
</thead>
<tbody>
<tr><td>Category 1</td>
    <td><span data-name="Sam">Sam: 5</span> <br /> <span data-name="Roger">Roger 10</span></td>
    <td><span data-name="Sam">Sam: 0</span> <br /> <span data-name="Roger">Roger 5</span></td>
    <td><span data-name="Susan">Susan: 25</span> <br /> <span data-name="Aimee">Aimee 15</span></td>
</tr>
<tr><td>Category 2</td>
    <td><span data-name="Sam">Sam: 5</span> <br /> <span data-name="John">John: 15</span></td>
    <td><span data-name="Sam">Sam: 0</span> <br /> <span data-name="Roger">Roger: 15</span></td>
    <td><span data-name="Susan">Susan: 25</span> <br /> <span data-name="Aimee">Aimee: 15</span></td>
</tr>
</tbody></table>

js Code:

$(".names a").click(function(){
  $("table span[data-name]").hide();
  $("table span[data-name='"+$(this).text()+"']").show();
});

Working fiddle: https://jsfiddle.net/1bh7ue49/1/

edited Jun 23, 2017 at 14:44

caramba

22.5k20 gold badges94 silver badges134 bronze badges

answered Jun 23, 2017 at 13:35

zuluk

1,5778 gold badges30 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

NoNice Over a year ago

Yes works well! I just need to add to show all options. I am wondering what's the difference in yours and caramba answers (other than ^) ? Thx

NoNice Over a year ago

You deleted your answer @caramba?

zuluk Over a year ago

@Caramba: Deleting your answer was not necassary. I first did not saw your ^=. :) I will take your part of code to my answer, ok?

AdityaParab · Accepted Answer · 2017-06-23 13:52:54Z

0

In your HTML, just wrap your player names in a span and proceed further.

JS:

function begin(){
  $('a').on('click', function(){
    let $span = $('span');
    $span.show();
    const player = $(this).text().trim();
    $span.each((i, s) => {
      if($(s).text().indexOf(player) === -1){
        $(s).hide();
      }
    });
  });

}

$(document).ready(begin);

HTML:

<table>
  <thead>
    <tr>
      <th>Categories</th>
      <th>Week 1</th>
      <th>Week 2</th>
      <th>Week 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Category 1</td>
      <td>
        <span>Sam: 5</span>
        <br />
        <span>Roger 10</span>
      </td>
      <td>
        <span>Sam: 0</span>
        <br />
        <span>Roger 5</span>
      </td>
      <td>
        <span>Susan: 25</span>
        <br />
        <span>Aimee 15</span>
      </td>
    </tr>
    <tr>
      <td>Category 2</td>
      <td>
        <span>Sam: 5</span>
        <br />
        <span>John: 15</span>
      </td>
      <td>
        <span>Sam: 0</span>
        <br />
        <span>Roger: 15</span>
      </td>
      <td>
        <span>Susan: 25</span>
        <br />
        <span>Aimee: 15</span>
      </td>
    </tr>
  </tbody>
</table>

<ul>
  <li><a href="#">John</a></li>
  <li><a href="#">Roger</a></li>
  <li><a href="#">Aimee</a></li>
  <li><a href="#">Sam</a></li>
  <li><a href="#">Susan</a></li>
</ul>

DEMO

answered Jun 23, 2017 at 13:52

AdityaParab

7,1003 gold badges30 silver badges40 bronze badges

1 Comment

NoNice Over a year ago

Yes it works. I have got 3 answers resolving my issue. I need to mark one as my answer now. I'll have a play about with all the options and see. Thanks

Collectives™ on Stack Overflow

Filtering tabular data with Jquery

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related