Conditionally hide cells in a table based on value in adjacent cell

Question

I am using a third party grid to display some data and I dont have any control over the markup it produces

In the example below, I'd like to hide the submit buttons for the rows where the adjacent cell has no value (i.e. the middle row in the example below)

I assume this is possible with jQuery but am a bit stuck on how to do stuff conditionally

<div id="grid"> <table> <tr> <td>123</td><td><a href="/go/somewhere">Submit</a></td> </tr> <tr> <td></td><td><a href="/go/somewhere">Submit</a></td> </tr> <tr> <td>123</td><td><a href="/go/somewhere">Submit</a></td> </tr> </table> <div>

any ideas?

Antonio Laguna · Accepted Answer · 2013-02-13 15:17:15Z

I think this should work, I've tried in http://jsfiddle.net/Bu5eZ/ and it's working as expected.

var cells = $("table tr td:first-child"); cells.each(function(i){ if ($(this).text() === ''){ $(this).next().find('a').hide(); } });

Mark Pieszak - Trilon.io · Accepted Answer · 2013-02-13 15:22:53Z

You could use the .filter() jQuery method, inserting your own logic inside of it.

$('a').filter(function () { return $(this).closest('tr').find('td:first-child').html() === ''; }).hide();

Chaining a simple .hide() at the end.

Edit, changed to td:first-child, speeds it up.

letiagoalves · Accepted Answer · 2013-02-13 15:23:49Z

Demo: http://jsfiddle.net/ChgMx/1/

$("#grid a").each(function(i,k){ if($(k).parent().prev().text().length == 0) $(k).hide(); });

Collectives™ on Stack Overflow

Conditionally hide cells in a table based on value in adjacent cell

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related