Question

I am trying to block a table row, but I am unable to do so. I am using jquery plugin, blockUI.

My code:

var dis_tr = $("input[name=abc]").closest('tr')
dis_tr.block({message: null});

Can anyone help me?

Answer 1

The problem was that, in case of table we can’t write anything except between td elements. And we can ‘t block whole row. Instead of this, we have to block each td element. For this, I have written new functions that uses blockUI’s block/unblock functions.

// Functions added to block/unblock table rows by using blockUI jquery library
$.fn.block_row = function(opts) {
    row = $(this)
    height = row.height();
    $('td, th', row).each(function() {
        cell = $(this);
        cell.wrapInner('<div class="holderByBlock container" style="width:100%; height: ' + height + 'px; overflow: hidden;"></div>');
        cell.addClass('cleanByBlock');
        cell.attr('style', 'border: 0; padding: 0;')
        $('div.holderByBlock', cell).block(opts);
    })
};

$.fn.unblock_row = function(opts) {
    row = $(this)
    $('.cleanByBlock', row).each(function() {
    cell = $(this);
    $('div.holderByBlock', cell).unblock({
        onUnblock: function(cell, opts) {
            this_cell = $(cell).parent('td, th');
            this_cell.html($('.holderByBlock', this_cell).html());
            this_cell.removeAttr('style');
            this_cell.removeClass('cleanByBlock');
        }
    });
    })
};