Question

I would like to show/hide a table cell based on the value in the previous cell. If the previous cell has a value than show else hide. Jquery should evaluate this for every row. I now have the following code:

    jQuery(document).ready(function() {
    jQuery('input[name^="OS"]').hide();
    jQuery('input[name^="OF"]').on('keyup', function(){ 
        jQuery('table#form_er tr').each(function(){ 
            if(!jQuery('input[name^="OF"]').val()){
                jQuery('input[name^="OS"]').hide();}
            else {jQuery('input[name^="OS"]').show();}
        });
    });
});

The result now is that all the OS-cells are hiden even if OF is filled, if I fill an empty OF all the OS-cells are show and when I clear an OF-cell nothing changes.
Can someone point me in the right direction? Thank you.

Answer 1

Try using jQuery(this) and closest(‘tr’) to target the cells only in the current row..

jQuery(document).ready(function() {
    jQuery('input[name^="OS"]').hide();
    jQuery('input[name^="OF"]').on('keyup', function() {
        jQuery('table#form_er tr').each(function() {
            if (jQuery(this).val() != '') {
                jQuery(this).closest('tr').find('input[name^="OS"]').hide();
            }
            else {
                jQuery(this).closest('tr').find('input[name^="OS"]').show();
            }
        });
    });
});​

if the cell you want to target is the next cell .. Then you can do this as well..

jQuery(this).closest('td').next('td').find('input[name^="OS"]').hide();

EDIT

Replace !jQuery(this).val() with jQuery(this).val() != ''