JQuery looping through each table row

Question

I have the following table structure

<table class="ms-listviewtable> <tr> <td class="ms-vb2-icon"/> <td class="ms-vb2"/> <td class="ms-vb2"/> <td class="ms-vb2"/> <td class="ms-vb2"/> <td class="ms-vb2">test1</td> </tr> <tr> <td class="ms-vb2-icon"/> <td class="ms-vb2"/> <td class="ms-vb2"/> <td class="ms-vb2"/> <td class="ms-vb2"/> <td class="ms-vb2">test2</td> </tr> <tr> <td class="ms-vb2-icon"/> <td class="ms-vb2"/> <td class="ms-vb2"/> <td class="ms-vb2"/> <td class="ms-vb2"/> <td class="ms-vb2">test3</td> </tr> </table>

I need to loop through each row then loop through each td and check if a td in a row contains the text 'test1' if so I need hide the td with class "ms-vb2-icon" within the same row.

Can someone please give me some pointers?

Nick Craver · Accepted Answer · 2010-06-29 02:27:53Z

4

You can do it like this:

$("tr:has(td:contains('test1')) td.ms-vb2-icon").hide();

You can test the code against your markup here

This uses :contains() to see if a <td> contains that text, wrapped in :has() to see if the the <tr> has an element matching that, the next we're finding the td.ms-vb2-icon cell in the matched rows and hiding them.

answered Jun 29, 2010 at 2:27

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

6 Comments

van Over a year ago

Many thanks for your explaination as well. I can see it working in the fiddle. Just not sure why its hiding the td on all rows in my webpart, unless the html table structure I see in IE developer toolbar isn't the same as the generated html code....

Nick Craver Over a year ago

@nav - I had to fix your markup a bit in fiddle, for example <td> can't be self-closing and the <table> element's class needs a closing quote. Make sure your actual markup is valid by checking it here: validator.w3.org

van Over a year ago

Thanks Nick i have pasted the actual markup into the fiddle edit jsfiddle.net/QUvYW

van Over a year ago

sorry to be a pain, but can you spot why it doesnt work as expected in my edited fiddle..?

Nick Craver Over a year ago

@nav - You still have invalid markup, all sorts of attributes...but it is still working, at least here in Chrome and IE, comment out the jQuery like this to see the difference: jsfiddle.net/QUvYW/1

|

Nikita Rybak · Accepted Answer · 2010-06-29 02:26:17Z

$("td:contains('test1')").addClass("ms-vb2-icon");

?

http://api.jquery.com/contains-selector/
http://api.jquery.com/addClass/

Collectives™ on Stack Overflow

JQuery looping through each table row

2 Answers 2

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Related