Solved

jQuery show/hide table rows

Posted on 2013-11-06
6
601 Views
Last Modified: 2013-11-06
Hello Experts,

I am using jQuery.....

I have a long table such as in the example below. What i am trying to do is hiding all the "tr" in the table but the ones i would like to keep such as in the array.

MODEL  |  COLOR  | SIZE
 0.1.5           Blue          86,70
 1.5.3           Red         113,60
 2.2.1           Yello          21,45
 1.5.7           Green      120,63

so for example i want to show only the rows ("tr") that its first td contains

0.1.5 and 2.2.1 and .......

Of course the first row (titles) should stay on.

Since this is a long list table its better to have the model numbers in an array.

Thank you for the help!
0
Comment
Question by:Refael
  • 3
  • 2
6 Comments
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39628804
something like:

var hideThese = ['0.1.5', '2.2.1'];

$.each('#tableId tr', function(idx, item){
     var $row = $(item);
     var $cell = $($row.find('td')[0]);

     if(!$.inArray($cell.html(), hideThese))
          $row.hide();
     else
          $row.show();
});

Open in new window

Sorry I couldn't test it...
0
 
LVL 44

Accepted Solution

by:
Rainer Jeschor earned 500 total points
ID: 39628848
Hi,
or something like this:
http://jsfiddle.net/EE_RainerJ/3YeGH/

function HideTableRows() {
    var rowsToKeep = ["0.1.5","1.5.3","2.2.1","1.5.7"];

    $("#mytable > tbody > tr").each(function(){
        if ($.inArray($(this).find('td:first').text(), rowsToKeep) == -1) {
            $(this).hide();
        }
    });
}

Open in new window


HTH
Rainer
0
 

Author Comment

by:Refael
ID: 39628873
Hi RainerJ

Works perfect! I just amended it a bit.

AlexCode, not only that it did not work but also it prompt for few errors in the code :-(
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Closing Comment

by:Refael
ID: 39628874
Works,  Perfect! Thank you!
0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39629441
@Refael: sorry mate, I wrote it on the phone. It's proven not to be a good practice :)
0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39629451
Heck... I can^t leave a crappy answer like this :)
You can see it in action here: http://jsfiddle.net/3kNTY/
Here's my code anyway:
var hideThese = ['0.1.5', '2.2.1'];

function hideRows(values) {
    var searchColumnIndex = 0;
    
    $('#myTable tr').each(function (idx, item) {
        var $row = $(item);
        var $cell = $($row.find('td')[searchColumnIndex]);

        if (!$.inArray($cell.html(), values)) $row.hide();
        else $row.show();
    });
}

hideRows(hideThese);

Open in new window

Cheers mate!
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question