CODEWITHSUNDEEP
jqueryhtmlformatting
ChrisCa
ChrisCa

Reputation: 11046

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

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?

Upvotes: 0

Views: 1116

Answers (3)

letiagoalves
letiagoalves

Reputation: 11302

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

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

Upvotes: 1

Mark Pieszak - Trilon.io
Mark Pieszak - Trilon.io

Reputation: 67161

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.

Upvotes: 1

Antonio Laguna
Antonio Laguna

Reputation: 9290

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();
    }
});

Upvotes: 1

Related Questions