using CSS to hide certain tr with specific class name only if it contain keyword

Question

I have many trs which have the same class name - sectiontableentry1.
I want this tr to be hidden only if it contains a keyword, such as "recommended".

Here is an example http://jsfiddle.net/aQfQK/1/

Do you want to do this on the server-side (i.e. PHP) or client-side (i.e. JavaScript)? Is the HTML generated? — timss, May 13 '13 at 00:58
Duplicate of http://stackoverflow.com/questions/1520429/css-3-content-selector - There's no CSS selector for content. You'll have to use JS. — Steven Moseley, May 13 '13 at 00:59
@timss the html is retrieved from remote site i want to do it on client side with jquery — Mostafa Biomy, May 13 '13 at 01:00
A whole lot of HTML and CSS to display a huge amount of nothing in your jsfiddle — Xotic750, May 13 '13 at 03:17

score 3 · Answer 1 · answered May 13 '13 at 01:45

3

If I am not misstaken, you are looking for something like this :

$('.sectiontableentry1').each(function(){
    if($(this).html().indexOf('recommended') != -1){
        $(this).hide()
    }
})

Since what you want is a little blurry to me, tell me if I am wrong.

answered May 13 '13 at 01:45

Karl-André Gagnon

33,662
5
50
75

Ran this in jsfiddle and it works. Forgive me if this is off topic but what does the "index not equal to -1" do? I just want to understand how it works. – Mal May 13 '13 at 02:07
@Karl-AndréGagnon thanks sir for your help, to make it clearer My code get the html source code of remote page `` then i want instead of echo $html as is, i want to remove or hide the rows that contain specific keyword thats it all i looking for to hear from you – Mostafa Biomy May 13 '13 at 04:13
`indexOf()` is getting the position of something in a string or an array. In this case, it get the position on "recommended" in the HTML. -1 mean that it fing no string "recommanded". – Karl-André Gagnon May 13 '13 at 13:36

score 1 · Answer 2 · answered May 13 '13 at 00:59

1

There are no CSS selectors which select elements based on content. The only way to solve this problem without modifying the HTML is to use Javascript.

The best solution is to modify the HTML to include a 'recommended' class on table rows than add the CSS:

tr.recommended {display: none;}

answered May 13 '13 at 00:59

drzax

1,675
1
16
20

I have no access to modify the html as its retrieved from remote server using file get contents – Mostafa Biomy May 13 '13 at 01:03
@MostafaBiomy Of course you can modify it's content if you're the one retrieving it. – timss May 13 '13 at 01:06
@timss the source code is got automatically and it differs every minute and offcourse cant modify – Mostafa Biomy May 13 '13 at 01:08
@Mostafa Biomy You can do whatever You want with the code with You get. It's enought to use one of this functions: http://www.php.net/manual/en/ref.strings.php – bumerang May 27 '13 at 07:00

using CSS to hide certain tr with specific class name only if it contain keyword

2 Answers2